I am having a issue rendering the Google Fonts hosted Roboto weights in Google Chrome specificlly, it works well in Firefox and other major browser. I have triple checked the implementation which is correct and implemented other fonts with various weights to test(which works) and the various implementation methods Google fonts offer.
Further analysis at the network request shows a response with the various font-faces linked to the external fonts however not all of them download specifically light.
I should note a couple of days ago all was working fine, im wondering is anybody recently is experiencing this problem?
Related
I'm using this font: Google Font - Faster One
but it doesn't display correctly in Chrome (v59)
while on Firefox (and Safari), it shows correctly as on Google Fonts website
What I also don't understand is that it still displays correctly on Google Fonts website using Chrome but not on my website.
P.S. I'm aware that many similar questions have been asked before. But I still cannot find any clear solution for my case
The solution is to use the correct font weight. Faster One font on Google Fonts only has regular (400) weight (previously, in my CSS, I use 600)
I have just noticed Google Fonts stopped serving their fonts in tff. Instead they do in woff2. Woff2 is not supported on iOS. And my layout gets all funny because of it.
Is there any way I can request the fonts in tff instead of woff2?
Thank you
You have to download the font using different browsers and watching the web inspector, thats because google detects which font type needs your browser.
[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.
[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.
IE 11 renders the text correctly. I need trouble shooting ideas..
The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.
Here is what I see and I don't think the fonts should look that pixelated... http://imgur.com/hwvupBq sorry too low rep to post images :(
Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)
The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/
I am using two Google Web Fonts at my website. They are Roboto Slab and Fauna One. They look good in latest Mozilla Firefox and IE10 but for some reason they look horrible in Google Chrome.
They are linked to my website as follows:
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
It took me a while to realize that Google Chrome has a problem with web fonts and that it renders them poorly. I am wondering if there is solution for this?
What if I download those two font types and embed them into the main directory of my website and then call them through CSS via #font-face property? Would Google Chrome in that case render those fonts nicely or I would still have the same problem and poorly rendered fonts???
Or there is some other solution for this issue?
Thank you all!
I believe I saw some bug report for Chrome where it was mentioned that this will be fixed - but I'm not 100% sure. I believe that it's not actually 100% the fault of Chrome...
My understanding is that the problem is to do with the order in which font types are presented in the #font-face directive. So, Chrome handles more than one type but not all types will render at equal quality. Apparently, Google actually doesn't serve the fonts in the right order from fonts.google.com - somehow...
In the end I found that, with Roboto at least (which I'm also using on a project), it is available for use on Font Squirrel (and open sourced under the Apache 2.0 license) - so you can download it here: http://www.fontsquirrel.com/fonts/roboto (download the Webfont Kit for full cross-browser font support) - you lose the CDN goodness of having it hosted on Google's servers if you use it from your own web server but, IMHO, I'd rather lose a few milliseconds than have to deal with such terribly rendered text...
I can't help you with Fauna One, unfortunately - it doesn't appear to be listed on Font Squirrel - perhaps you can find it on another font site? Or another similar font which is available on font squirrel?
From a web browser perspective (Chrome being the browser in question), Chrome 35 in Windows has difficulty rendering some fonts, like Roboto, without some horrible artifacts that make the font difficult to read.
There is a feature called DirectWrite that will be included by default in future versions of Chrome that will fix this problem. You can enable it now in Chrome 35 by going to chrome://flags in your browser URL bar. You can Enable DirectWrite (experimental in Chrome 35), close your browser, open and try again.
Just to be clear, I discovered this problem on Chrome 35 for Windows. DirectWrite is a DirectX API for rendering fonts in Windows. Chrome by default uses Windows Graphics Device Interface (GDI) which seems to be the problem.
See this article
I'm launching a new site soon and would like to use a nice font (for headings etc). I've experimented with scripts like cufon and found them very disappointing. The way I see it, I have two legal options:
Create my own font stacks using fonts that are licensed for #font-face (like fontsquirrel)
Subscribe to typekit
Use standard font stacks including some of MS Office's nicer fonts (not keen on!)
I'm looking for comments from someone with experience here, not speculation please (I can do that myself!).
Has anyone used typekit? Have you noticed any performance issues?
I used the typekit free trial, and loaded it using Google's webfont loader (which works with Typekit, Google fonts, and Ascender. I've never used Ascender, but found Typekit and Google fonts to be of about equal speed. This speed was not enough to deter me from using it. I have a very lightweight website, so one large item didn't impact it too much, but given what broadband penetration is and how much processing power it seems to use I wouldn't dissuade you from using this. These font files are all smaller than most small .swf files and people don't balk at using those.
Also, in regards to Safari on Mac, I've noticed no issue with Google fonts and I'm curious if the javascript that #rvlanen references is the javascript in the typekit font loader. Google's webfont loader doesn't seem to have this issue.
Hope this helps
P.S. Link to Google Webfont loader: http://code.google.com/apis/webfonts/docs/webfont_loader.html
If you're concerned about performance, you could do testing with TypeKit's free preview account. They also have public uptime and response stats.
There is also the option of licencing fonts for hosting on your own server. FontShop will sell you a set of WOFF+EOT fonts for a one-off price, but that will only work in IE and FF 3.6+ at the moment. You can also transfer the purchase to a free TypeKit account, which will cover Chrome + Safari too.
Typekit doesn't work in Chrome for Mac when using HTML5 markup. Apparently this has to do with the way their JavaScript works. Read more about it here.