Tagged: google fonts, typography
-
AuthorPosts
-
June 23, 2015 at 2:35 pm #463415
For some reason, the ä and ö letters don’t load from Droid Sans, although the glyphs are included in the font file.
What is going wrong with the font styling? Please advise. Link in Private Content area.
June 24, 2015 at 5:27 am #463752Hi hollowgram!
I can’t see anything in the private area, not sure if you forgot to post it maybe?
Regards,
RikardJune 24, 2015 at 11:58 am #463933Hmm, strange. URL for a page with lots of Ä’s and Ö’s is http://pointpanic.vitaligusatinsky.com/graafinen-suunnittelu/.
I’ve tried not selecting the Droid Sans font from the theme styles and using own CSS overrides, I’ve tried importing the font assets via CSS @import or <script> but nothing is making a change. Checking Google Fonts and their preview tool shows that the necessary glyphs are there, but they either load wonky (e.g. Firefox) or replaced by Helvetica (in Safari).
June 25, 2015 at 10:47 am #464522Hey!
Please add this in the functions.php file:
function add_subset_func($fontlist) { $fontlist .= "&subset=latin,cyrillic"; return $fontlist; } add_filter('avf_google_fontlist', 'add_subset_func');
Best regards,
IsmaelJune 25, 2015 at 12:08 pm #464547Hello, Ismael,
I have added that to the child theme’s functions.php and don’t see a difference. I went and removed my Google Font imports so the only place Droid Sans is coming from is via your theme. Regardless, after flushing caches and deleting internet history files, the problem seems to persist for me.
Any other ideas?
June 27, 2015 at 2:12 pm #465286Hi!
Did you manage to sort this out? i couldn’t really note the issue on my end (Chrome / OS X) – http://screencast.com/t/9Jyn05jz1N
Cheers!
JosueJune 27, 2015 at 3:31 pm #465300Unfortunately this is not resolved. To illustrate the problem, I made an imgur album: http://imgur.com/a/ZlOSV
I hope you guys can help me resolve what this is, because I’m losing hairs and my client is not happy.
June 29, 2015 at 2:22 pm #465858Hi!
I checked the site again and it’s rendering the Droid Sans font correctly including the cyrillic characters. The font link is now correct:
<link rel="stylesheet" id="avia-google-webfont" href="//fonts.googleapis.com/css?family=Droid+Sans&subset=latin,cyrillic" type="text/css" media="all">
On which browser are you testing this? Please remove browser cache or hard refresh the page.
Best regards,
IsmaelJune 30, 2015 at 1:22 pm #466362Firefox 39.0.5, the latest browser (umlauts not aligned)
OS X 10.10.3 Safari 8.0.6 (umlaut characters not loading, replaced with Helvetica)
iOS 8.3 Safari (same as OS X Safari)The *only* browser the theme currently works well with on my computer is Google Chrome.
Now, I went to BrowserStack and did a basic screenshotting of the page live through their service, and the error is in pretty much every screenshot it generates: https://www.browserstack.com/screenshots/bfaeef0adabae28349843f1234db337acd043a0b
Any ideas how I can get this issue fixed? I don’t think it’s a problem with the Google Font itself, as it’s used without issue all around the web.
July 2, 2015 at 2:10 pm #467494Hey!
can you try it with a default WordPress theme please and let us know about the results? there might be some corrupted files on your installation and in this case you would need to delete all theme files and get a fresh copy from your themeforest account.
Cheers!
AndyJuly 6, 2015 at 6:00 pm #469163Hello,
After a lot of probing, I have found the source of the issue: it wasn’t the font, nor the theme, nor WordPress. It was the content I pasted. Apparently there are TWO ways of rendering ä in Unicode, one that renders the a and ¨ together, and another where they are separate.
A commentator in /r/webdev on reddit put it this way:
This looks like a classic Unicode problem – it’s possible to represent the letter ‘ä’ in two different ways. NFC (normal form composed) or NFD (normal form decomposed).
NFC ä would be one glyph:U00E4[1] or LATIN SMALL LETTER A WITH DIAERESIS.
NFD ä, however is two glyphs: U0061[2] or LATIN SMALL LETTER A and U0308[3] or COMBINING DIAERESIS.
So this is indeed now solved and the issue was the content and Unicode, not anything else.
Thanks a lot for the help, it was useful to lead me in the right direction. All the best!
-
AuthorPosts
- The topic ‘Ä/ä and Ö/ö letters appear weird with Droid Sans’ is closed to new replies.