Hello,
I am setting up a website in Croatian language using the Source theme. Across the site the fonts work fine, but in the navigation, some letters (like ž or š) - attached screenshot -
are displyed bold. How can I fix this? Any ideas?
Thanks
I also use Source theme, but I can’t reproduce the problem if I copy the character you provided to ‘Navigation’.
what’s the font you are using?
Hm…Modern sans…
Interesting enough I see this error on desktop but not when I open the page on mobile!
If you don’t mind, you can send me your blog link, I’ll help you check it : )
It is vjezbaona.hr
This problem is caused by loading a font that doesn’t include a full set of characters – in this case, it looks like Inter-roman is to blame. It doesn’t include some of your special characters, so the browser is selecting a different font for those characters.
Thanky you Cathy. Where does one specify which font is loaded? Can I change it?
Also, does this mean it is only on my browser?
It’s probably not only your browser. But it may be a only subset of browsers - what’s happening on my browser is that it’s loading the Inter font for the non-special characters, but falling back to a different font for your accented characters. Which is why things look weird.
From looking at the source code for your page, it looks like the font is loading here:
@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:100 900;src:url(../fonts/inter-roman.woff2) format("woff2")
That’s loading the font from within the theme, but that version of the font looks like it’s missing some characters. Instead, try this in your code injection header (access through /ghost > settings (the gear icon) > code injection:
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
</style>
edit: I thought I’d opened a bug on this issue, but I don’t see it. Will open one.
I can confirm that this is a problem. For me it is with the EB Garamond font and Hungarian accented őŐüŰ characters. These glyphs are in the latin-extended charset and they currently fall back to a different font.
The header code injection hack may work I guess however I don’t think it can be a valid solution for me and other European Ghost site owners because of the implied GDPR compliance issues.
The correct solution would be to embed the latin-extended charset as well (or maybe the ones for other scripts too, like cyrillic, greek, etc.) beyond the basic latin in the themes.
You can instead drop the font file into a Ghost post, preview it, copy the link to the font, then use that in the code injection. That way everything lives on your own server.
(You’ll need to grab the contents of the imported file and everything it imports.)