Why are some glyphs missing from the text when using a custom font? - css

So this is a problem I have on a site I'm developing, but I included a screenshot from the Google Fonts web site, because it's public and everyone can look at it and it's also clear it's not something specific to my code.
The screenshot was taken on a Windows 7 virtual machine running IE9. It's the virtual machine from https://dev.modern.ie, so there shouldn't be anything special about it either.
And finally, this is the Fira Sans font, but this same issue has happened to me before with the Lato font on another (Windows) machine, so it shouldn't be the font either.
If you open the page — https://www.google.com/fonts/specimen/Fira+Sans — it will probably look just fine on your machine, as it does on mine. I can only reproduce it on the VM.
Here's how it looks in IE9:
In Chrome all glyphs are missing, so all of the text that is using the font is not rendered at all.
In Firefox the rendering is a little ugly, somewhat pixelated, but at least all of the glyphs are there and it's almost alright.
I tried deleting C:\Windows\System32\FNTCACHE.DAT and some font-related .dat file in
C:\Windows\ServiceProfiles\LocalService\Appdata\Local, but it made no difference.
At this point I have absolutely no idea what's going on. Do you have any idea what might be causing this? Any help is much appreciated.

Related

Rubik font not rendering anymore

I have got a website running with the Google Fonts Rubik for ages. This morning it appears that this font is not rendering anymore on my desktop (Chrome, Firefox, Opera) and several others, coming up fine on my Smartphone. I switched to Roboto for the time being.
Any idea ?
This http://www.mejoresdatos.cl/FontIssue.aspx shows what shown below:
Same problem here it only happens on Windows 7 Machines no matter the browser. OSX and all mobile devices I have tested on it is working on.
https://fonts.google.com/?query=Rubik. See this is not even working here. Temporarily you can try embedding the font through CSS. Till google solves this.
I had the same issue, what worked for me was simply to force a new fetch rather than rely on the cache.
i.e. I added the parameter &cache=clear to the font.googleapis.com URL:
#import 'https://fonts.googleapis.com/css?family=Rubik:400,500,700,900&cache=clear';

Google Slide font (Chinese font) changes when in presentation mode

I was making a presentation using Google slides (in Chinese) and when I want to preview it in presentation mode, "some" of the font looks different from editor mode.
The sample here
I've tried searching on Google and found only this discussion thread, but my problem is a little bit different. The font changes when I change it in the editor and in the presentation mode, the "character" somehow just looks different in presentation mode(the font style is correct). I have tried Safari, Chrome, Firefox, but all fails.
Is this like a bug only for Chinese characters? English seems perfectly fine to me. Does anyone have the same problem and knows how to resolve it?
Actually this happens to many other languages (like JP, KO, etc.) as well.
It gets rendered differently from editor to presentation mode.
So, here is the quick fix for the issue.
Use 'ShowAsIs' Chrome extension to fix it.
https://www.youtube.com/watch?v=Rt4xnAFFGik
Disclaimer: I am the developer of the extension.

Github not reading fonts embedded in site

I've design this site, and have used a font, embedded it within the site, it reads fine on my computer, but when I look at the site on another computer, the font does not appear?
Any idea how to fix it? Thanks:)
website: http://schan01.github.io/project2/hypertext.html
you need to have that font file uploaded somewhere. most
url('//fonts/Apercu.otf') is telling the browser to look at http://fonts/Apercu.otf which is obviously not correct.

Font Face rendering issue

Im currently building a website and it seems that the font used in the header isnt rendering correctly on windows machines. I've checked the windows machines have cleartype enabled which they do so im wondering if anybody else has come across this issue or knows what the cause is?
Windows...
OSX...
It seems that particular font has not been properly hinted, and that causes numbers to have uneven sizes with the Windows ClearType (mis)renderer.
You can try to fix the issue with the FreeType’s ttfautohint tool.
There are a lot of reasons why fonts render differently from OS to OS and browser to browser. This SixRevisions article discusses some of the challenges using custom fonts online and towards the end there is a section on font rendering. It's a jungle out there.

Google Fonts Flash in Internet Explorer

I just set up Google Fonts API on my site. Internet Explorer, whenever I refresh the page, a default font flashes before the Google Font 'Reenie Beanie' loads. But shouldn't this be sticking in the cache or something so that once it loads once, it's there and no longer should default fonts show up?
I'm using the WebLoader version to call the fonts. I originally just used the <link> call to the fonts, but the problem there was switching to an https page - I had to use the https link, but then I think that stopped the fonts from caching too. Everything is fine in Firefox (no flashing).
Any suggestions on this?
www.n-styleid.com
Everything is working as it should (In the worst sense of the words)
This is just a problem IE is having with its rendering engine. It cannot download/retrieve the fonts and render them as fast as the basic built-in fonts that the OS has.
There really is no good way to fix this as it is not something that you broke. The best advice that I can give you is to find a font in the system that looks closest to it (Not many handwritten in the system but better than arial) and use that in your font stack.
Hope that helps.
A work around is to hide the element with css and fade it in with jquery. This will give your font time to load. Its a good idea to use a decent fallback if the content is vital.

Resources