CODEWITHSUNDEEP
htmlcssfontsgoogle-font-apigoogle-fonts
Rwzr Q
Rwzr Q

Reputation: 184

Google font special character displayed correctly on PC but not in HTML?

I am using a Google font "Kameron". I downloaded it from fonts.google.com

It displays special characters such as "š" correctly in Photoshop, and also in a .PDF file viewed in browser. So, the font obviously supports these characters and the browser is able to render them.

However, when used in a HTML Web Page and viewed in browser (Firefox, Chrome, Edge) it doesn't display the special character, instead it replaces the character with a default 'serif' font.

I am running the website locally. I've included the font using Google's standard <link> embed. I've also tried downloading it, converting it to a web font, hosting it locally and importing it using @font-face in CSS, but that didn't help.

I've tried searching but couldn't find anything relevant to this specific situation. I'm sorry if the answer is obvious or something but I'm not seeing it. Can you help?

h2, p { font-family: 'Kameron', serif;}
<link href="https://fonts.googleapis.com/css?family=Kameron:400,700|Open+Sans:400,600" rel="stylesheet">
 
 <h2>Tešting</h2>

Upvotes: 2

Views: 1885

Answers (1)

Mr Lister
Mr Lister

Reputation: 46599

Since the TTF file doesn't contain a š glyph, you can use the NFD form, the combined glyphs s and ̌, or, š.
My guess is that's how Photoshop does it.
To see the differences between the NFC and NFD forms, see here:

   div {font:72px 'Kameron';}
 <link href="https://fonts.googleapis.com/css?family=Kameron:400,700|Open+Sans:400,600" rel="stylesheet">
   
<div>NFC: smje&#x0161;ten</div>
<div>NFD: smje&#x0073;&#x030C;ten</div>

Disclaimer: doesn't work as well as could be hoped in all browsers. This is what I was going for:

enter image description here

Upvotes: 2

Related Questions