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 am having an issue with customizing a WordPress template.
When I try to apply a Google Web font to a phone number in the header (as in dev [dot] beyondbbd [dot] com), Google fonts don't seem to be applied to the phone number (or all across the site for that matter) in IE9.
Any ideas about this? Is there an easy fix that I'm missing?
Thanks in advance.
-Nick
Try rearranging your css files so that the Google stylesheet comes before your own stylesheet which calls the fonts.
i heavily use Google Fonts and custom fonts, as Google Chrome has a bad habit of rendering them poorly, which is a shame because everything else works so well with Google Chrome, is there any way i can (preferably using css) render the fonts to an 'Apple Safari' standard?
Thanks,
This is an ever confounding question. (see: https://superuser.com/questions/354006/google-chrome-never-renders-fonts-properly-no-smoothing-etc. See also: http://productforums.google.com/forum/#!topic/chrome/oXILHkVG75M)
It's a Windows 7/Vista ClearType issue. AFAIK Safari, FF and IE render text differently or use their own text rendering routines. Basically, it used to be that you could add a small shadow to set an internal Chrome rendering flag, and the text would look decently better, but it still looks pretty bad. That no longer works. As far as I can tell it's a bug in Chrome that hasn't been fixed.
I'm still looking for a work-around myself, but I think we're pretty much out of luck
Have you had a look into -webkit-font-smoothing ? I regularly use Google Fonts and #font-face kits and have had success with some of the 'chunkier' fonts using the 'subpixel-antialiased' and 'antialiased':
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
Perhaps try each and see if either makes a difference to what you're seeing?
There's a post on MaxVoltar that gives a reasonable explanation:
http://maxvoltar.com/archive/-webkit-font-smoothing
Occasionally users report that the text on https://squareup.com looks like gibberish (or garbled) to them… however we’ve been unable to reproduce this.
Users report to be using either Chrome or Safari on Windows, so this may be an issue with webkit.
Here are a three screenshots that have been taken of this occurring on https://squareup.com:
The pricing page on our current site:
Easily recreated by using an older version of Windows as well as an older branch of Chrome. Seems like Chrome 4-8 have this issue. For testing purposes, boot into XP with Chrome 4. The problem lies in text-rendering: optimizelegibility. This is a reported bug in older Chrome versions when using optimizelegibility with #font-face when using woff fonts. If you can reproduce the issue, try taking out vertical-align: baseline and see if the rendering is still garbled.
It may be something related to the character encoding. Try explicitly specifying the encoding by putting this in the <head> of the page:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
it's a bit of a stab in the dark, but have you considered re-generating the #fontface files, just in case there's some form of corruption which only surfaces when viewed in certain WebKit browser versions?
If you have one, try running a TTF through the FontSquirrel fontface generator:
http://www.fontsquirrel.com/fontface/generator
Maybe its the custom fonts acting up? When I view your site in firefox it says its in Helvetica Neue but in Chrome it says ag1, agb
I don't have a surefire answer for you, but it looks like you're using the Modernizr class and looking at your html node in Chrome it has the js fontface class applied to it, which suggests custom font-face problems.
they probably have clear type turned off. http://www.microsoft.com/typography/cleartype/tuner/step1.aspx
It seems to me that the texts in question have text-shadow applied to them. This is pretty bleeding-edge, experimental, demanding, unreliable stuff, for little if any visual value (eg white shadows on a white background).
There is a simple answer to this - your css code is representated prior to your server side processing. I bet your using some type of css php or repository for serving up your style/css/markup/jquery or external source for that page.
I'd suggest you put in some wait states and checks for post process or check your ajax/xajax methods. :)
I hope that helps.
I had same issue and figured out that the problem was with font-face. Among the multiple font source files second preference was for "svg", changed to truetype solved the issue.
I use Firebug avidly and in the CSS-"computed" tab it will only show me the declared stack, but not which font has actually been used by the browser. Aside from removing fonts one-by-one and looking for a change (or having amazing font recognition skills) is there a way to determine what font has actually been rendered by the browser?
This firefox add-on will help: https://addons.mozilla.org/nl/firefox/addon/4415
also read theese:
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
Detecting which font was used in a web page
https://superuser.com/questions/43280/utility-to-determine-the-font-used-on-a-site
http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/