Hi. The font used for my themeis working well locally and on mobile too but not on desktop. Can I DM my site to someone who can help me on this?
I don’t know what this means. To me, “locally” means “desktop”, yet you list “desktop” separately.
Sorry for the confusion. By locally I mean on my local system/localhost
By desktop, I mean after I pushed my site online and when I open the website on my PC
From How to Request Help:
If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.
But DM also may work, if you have identified someone.
Check the messages of your favorite browser’s developer tools to see which fonts it tries to load.
Says ‘SF Mono’ but it is falling back & loading the common Serif font. Like I said it loads the SF Mono font on localhost but when I uploaded the site to Github and subsequently Netlify, the font won’t load.
Please be specific. No console that I know simply “says ‘SF Mono’”. Your browser uses an URL to load the font, and if it can’t access that URL, it falls back to something else. In Firefox, you’ll see something like this
And there you can clearly see the source it tries to access (unsuccessfully).
Sorry, I was looking at the wrong place.
This is the error I’m getting
Access to font at ‘https://www.mysitename.com//fonts/SF-Pro-Display-Bold.otf’ from origin ‘https://mysitename.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Failed to load resource: net::ERR_FAILED
There you go. You should fix the CORS policy.
I tried adding a _headers file next to index.html with
/*
Access-Control-Allow-Origin: *
But its not working
You should read about CORS and all that and then decide what to do. Nothing off that is related to Hugo, it’s a matter of setting up your webserver etc.