Wordpress Issue - Google Font Renders Differently - wordpress

Hoping someone may be able to help. I'm using source sans pro from google and have loaded it in a static html file and wordpress. The font rendering looks different between the two with the static font looked better and slightly more bold.
Has anybody come across this issue?

Related

Custom fonts on mobile working on some pages but not on others

I'm using WordPress to build a site https://triclimb.co.uk for my employer. We're using a custom font for selected bits of the site such as headings etc. The font is Gabbaland.
The issue I'm facing is that the font is working perfectly on the home page and other pages across the site (both on desktop and mobile), but on selected pages of the site the font doesn't work on mobile devices.
Example of where the font doesn't work: https://www.triclimb.co.uk/gallery/ the heading 'triclimb on instagram' should be using gabbaland
I can't replicate the issue in any browser on a desktop, I can only see it on a mobile device.
Could anyone help me out? Really confused as to why the font is working on some pages but not others.
Two of the font files throwing 404 error for fonts in console. Please double check wheather you integrated gabbaland font family properly.

#font-face and Google Translate

I have an annoying problem with #font-face fonts/code and Google Translate. It seems that Google Translate block display/usage of external fonts.
The script itself is nothing special - just a code generated by Font Squirrel, which works fine, except when Google Translate is used.
Can you please give me info how can I diagnose and/or fix this?
Or maybe is there any known issue with custom font display with Google Translate.
Thanks!

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

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.

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.

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