CODEWITHSUNDEEP
cssfontsfont-facelocalwebfonts
edison23
edison23

Reputation: 142

Load locally hosted font (.ttf) on an offline user PC (avoid Cross-Origin Request Blocked)

I created a page (basically a tool) which is meant to be cloned from Github by a user and used on the user's PC so they don't need a web server to use it (and so I don't need webserver to make tool available for others).

I wanted the page to use a font I've chosen so I downloaded the font (.ttf) and used @font-face to load the .ttf file (placed into the same directory as the .css file):

@font-face {
  font-family: 'Nunito Light';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Nunito-Light.ttf') format('truetype');
}

When I host the tool on my webserver (which I actually do have but that's kind of beside the point), the page displays with the font all right: https://edison23.net/tocjs/tocjs.html . However, when I try to open the page on localhost on my PC, I get the CORS blocked warning in Firefox's console and the page uses some installed sans-serif font installed on the machine instead:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///S:/ENGs/DKlement/tools/tocjs/assets/Nunito-Light.ttf. (Reason: CORS request not http).

I've Googled around to see what are the options to avoid this and haven't been able to find a solution since all the advice I've found are meant for loading fonts on a webserver, not on a user's local PC.

So, dear SO fellow users, is there some reasonably straightforward way to get aournd this?

Thanks a lot.

edit: I've posted documentation of the whole problem and solution to my blog if the details here were not enough.. well.. detailed: https://www.edison23.net/css-webfonts-in-a-locally-hosted-html-web-page/

Upvotes: 1

Views: 739

Answers (1)

sodimel
sodimel

Reputation: 916

You can include your font data directly inside your css as a base64 content (check this answer by damianfrizzi).

So you can include this custom-css-containing-a-font file and use it to define a new font-face, and then use this font-face on your other css file.

edit: Found this page on fontsquirrel from this question that has this parameter:

screenshot of fontsquirrel website

The zip file that you download then contain your font embedded in a css file:

screenshot of fontsquirrel zip

Upvotes: 2

Related Questions