Hi there, I’m using Atom editor with an atom-live-server to test my sites. I’m currently trying to add custom fonts to my site using a link added to the HTML,
but my fonts aren’t displaying correctly. Under the Google browse console i get the following error: “Access to font at ‘https://blogfonts.com/fonts/c/387/1387/file/cooper-hewitt.light-italic.otf’ from origin ‘http://127.0.0.1:57677’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”
Here is the HTML code used in the header for the font:
<link href="https://blogfonts.com/css/aWQ9MTM4NyZzdWI9Mzg3JmM9YyZ0dGY9Y29vcGVyLWhld2l0dC5ib29rLm90ZiZuPWNvb3Blci1oZXdpdHQtYm9vay0z/Cooper Hewitt Book.otf" rel="stylesheet" type="text/css"/>
I have read up on CORS policies, and I am slightly lost as to how to solve the problem. Is this due to a problem on blogfonts site where I’m requesting the fonts from, or is this an issue with atom-live-server?
Any explanations or solutions would be appreciated greatly.
You can’t hotlink the fonts, it’s not a CDN. You can download them, but they’re not going to let you link to the files as whoever owns that has to pay for their server. You need to host the font.
So if the .otf isn’t referenced in the link it means it’s a CDN? Blogfont states on its site that the font can be embedded using that code, paired with a font-family property in the CSS.
*edit oh wait I forgot to add the HTML code correctly: <link href="https://blogfonts.com/css/aWQ9MTM4NyZzdWI9Mzg3JmM9YyZ0dGY9Y29 vcGVyLWhld2l0dC5ib29rLm90ZiZuPWNvb3Blci1oZXdpdHQtYm9vay0z/Cooper Hewitt Book.otf" rel="stylesheet" type="text/css">
Ah it’s very difficult to find that, as the site has no kind of help or information, I didn’t see it until I’d actually scrolled down on an actual font. It looks very much like someone’s just thrown together that site sometime in the past and never updated it in line with current browser security – any modern browser will just throw the same error because the headers that the server is sending are incorrect [as per current security settings for Chrome, FF, Safari etc]. So tl/dr – unfortunately, that site is unusable for what you’re trying to do.
1 Like