@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

The correct font name is Lemon/Milk and you'll need to convert it to other format like WOFF WOFF2 as well.

Please Follow this:

1. Go the this Website free online font generator
2. Upload your font and check TTF, EOT, WOFF, WOFF2 (See browser support)
3. Click Convert > Download
4. Upload the newly converted fonts to your server

Finally your CSS should look like similar to this.

@font-face {
    font-family: 'Lemon/Milk';
    src: url('LemonMilkbold.eot');
    src: url('LemonMilkbold.eot?#iefix') format('embedded-opentype'),
        url('LemonMilkbold.woff2') format('woff2'),
        url('LemonMilkbold.woff') format('woff'),
        url('LemonMilkbold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Please Note that you'll need to convert any other font weight too. and don't forget to add the correct path

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.

well i suggest creating a different css file for your fonts then import it to your main css also this site generate font-face for your font with css file!