Diacritical marks on imported font not displaying correctly on mobile

Diacritical marks on imported font not displaying correctly on mobile
0

#1

I am just about ready with my tribute to Milan Šimečka.

I have the following problem on mobile only .( I tested on an Android device) The letters with diacritical marks Š and č are displayed with a big ugly sans serif font, although my fall-back font is serif. This happens on the jumbotron where I am using the font Comprehension that I got from fontlibrary.

Is the problem caused by with using Codepen on mobile? With using fontlibrary instead of google fonts on Android. Or caused elsewhere? Any advice would be very much appreciated.

Please feel free to submit your comment of the tribute page in general too. My ideal user story is in fact “I can read the page I am now interested in knowing more about the writer, and/or the times he lived in”.


#2

It’s nice. Very simple and easy to read. I would suggest to put slightly darker background for the entire text section (something like bootstrap’s well class). Also, the photo doesn’t seem to resize properly - when i resize my browser to smartphone-like width, i can see only part of the guy’s glasses.

As for your question - I have the same issue with google fonts on my tribute page. I assumed it’s just the old version of browser on mobile since i haven’t updated it in a looooong while (also, the fact that it doesnt show some newer CSS properties, like filter, seems to confirm my theory).


#3

I tried your codepen on iPhone and it shows like on desktop. On Android I have the same ugly Š and č.

It looks like Android’s default font is bigger than Comprehension font (and Comprehension supports only:
Basic Latin, Euro and Western European, so no Central and Eastern European symbols).

My suggestion is to use different font which has š and č or use media queries and show different font on mobile devices.


#4

Many thanks @KamilCybulski and @jenovs for your comments.

I tried tested with another Central European font from fontibrary but it did not work at all. Next I tried using character references like so:

<h1>Milan &Scaron;ime&ccaron;ka</h1>

But that did not make any difference.

Finally I came across this thread from Stack overflow that there is a overall Android specific problem with “Latin 1 supplement characters”. Now I use ‘PT Serif Caption’ imported from Google fonts that has Central European and it works fine on Android.

I did change the background from default white to ‘Linen’ to soften the contrast a little bit and increased the paragraph text to 18px overall. I agree that using media queries to make both the image and text properly responsive is the way to go.But I haven’t gotten that far yet. Probably for version 2.