Search code examples
cssreactjsfont-face

@font-face only working if the font is installed on the local machine

I am trying to use a custom font, which is not available via Google Fonts. I unzipped the font and put it into src/assets/fonts of my React project.

In my index.css I am loading the font like:

@font-face {
  font-family: 'LemonMilk';
  src: local('LemonMilk'), url(./assets/fonts/LemonMilk.otf) format('otf');
}

I tested the app both on the localhost and hosted it on the web for testing and it is working fine, since the font is installed locally on my machine, but if I open the app on a different machine it is not working. I also deleted the font from my machine and the fallback font started to show since then. What am I missing ? Thank you

Solution

  • It's looking like Your browser has a problem with understanding the font file. Try to make the webfont package from the font file. There is lot of tools to approach it:

    https://www.fontsquirrel.com/tools/webfont-generator

    Webfont package will contain the font in all major supported formats and will generate the css @font directive for You.

    DISCLAIMER: Ensure that You have the rights to use the font.