Search code examples
cssfont-facewebfonts

Why are these @font-face declarations not loading anything?

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?

Solution

  • 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').