How to write @font-face for Chrome

Question

Here is my @font-face in css:

@font-face{
    font-family: CamphorW01-Thin;
    src: local(CamphorW01-Thin), 
         url('/usr/share/fonts/opentype/Camphor W01 Thin.otf');
}

The fallback is for end-users that don't have the custom font installed.

I have installed the custom fonts on Ubuntu 18.04 server (in the cloud), but when I access the site from my local Chrome browser, the dev console shows:

GET http://(IPAddress)/usr/share/fonts/opentype/Camphor%20W01%20Thin.otf 404 (not found)

The custom fonts are installed in /usr/share/fonts/opentype/ and /usr/share/fonts/truetype/, and the font cache was rebuilt. When I issue the command fc-list, the fonts appear in the list. I checked the spelling and path, and it all matches.

Is there something wrong with my @font-face line shown above? Or is it something else?

Thanks for the help. I'm very puzzled.

ceejayoz ceejayoz · Accepted Answer · 2019-06-20T19:36:22

The URL needs to be a URL, not a path. Your users can't access /usr/share from their browsers.

How to write @font-face for Chrome

1 Answers