0

I'm trying to import TTF fonts in a Chrome extension I'm working on, but the font-face rules I've written don't seem to be getting picked up by Chrome:

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url('/fonts/Montserrat/Montserrat-Regular.ttf') format('ttf');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat-Bold'), url('/fonts/Montserrat/Montserrat-Bold.ttf') format('ttf');
}

What am I doing wrong?

2
  • Try using Google Fonts to manage the font declaration CSS. See google.com/fonts#UsePlace:use/Collection:Montserrat Oct 7, 2015 at 7:15
  • Since this is a Chrome extension, it's going to get used in scenarios with incomplete network access (such as behind a captive portal) - making it network-dependent via Google Fonts is less desirable than something local to the package. I'm vendoring the fonts into the downloaded package directly from github.com/google/fonts. Oct 7, 2015 at 8:06

1 Answer 1

1

Unlike nearly every other font format in webfonts (which match the most common file extensions for the contained font), the format identifier for TTF fonts is format('truetype'), not format('ttf').

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.