3

I am using google webfonts and have come accross an issue with jagged and choppy font rendering in FF and chrome (IE11 renders them better).

Example can be found here: http://jsfiddle.net/PNYfR/

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Exo:300,400,700&subset=latin">
<p style="font-family: 'Exo', serif; font-weight: 400; font-style:normal; font-size:31px; color:white; background-color: #0085B2; line-heigth:1.42857; padding:100px">
Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897
</p>

I've read related questions, but any of them don't offer simple solutions for quick projects:

To complicate a bit more, our designer is using Mac, which renders fonts correctly.

Questions:

  • Is there a list of google webfonts which render OK?
  • Or is there a quick step by step solution on how to get fonts render correctly?
  • And last, is there an alternative free webfont provider, which serves fonts OK?
Community
  • 1
  • 1
zeldi
  • 4,833
  • 3
  • 19
  • 18
  • possible duplicate of [CSS3: Webfont Smoothing and Antialiasing in Firefox and Opera](http://stackoverflow.com/questions/11459746/css3-webfont-smoothing-and-antialiasing-in-firefox-and-opera) – Sinister Beard Apr 17 '14 at 13:22
  • duplicate talks about OSX, I have problems on Windows – zeldi Apr 17 '14 at 14:29
  • Great fix for this issue is to host your fonts locally, I recommend google-webfonts-helper to help you https://google-webfonts-helper.herokuapp.com – Vael Victus Nov 14 '18 at 22:39

5 Answers5

2

I've found that downloading the fonts I want to use, converting them to .svg using font squirrel (web application, google it) and hosting them on the web server seems to solve the issue. In the code, place the .svg font link above the others and Chrome will/should grab that first.

user1752708
  • 41
  • 2
  • This is the approach that I've used successfully in the past. More details at http://lee.greens.io/blog/2014/01/13/windows-chrome/ – LeeXGreen May 07 '14 at 14:53
1

These are the defaults for font smoothing (with google fonts too) I use that seem to do the trick. Hope this helps

*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow:none;
text-rendering: optimizeLegibility;
}
Daniel Broughan
  • 755
  • 1
  • 9
  • 17
  • 2
    tried that in jsfiddle but with no visible improvement – zeldi Apr 17 '14 at 20:29
  • My final code for font smoothing looks like this `* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; text-rendering: optimizeLegibility; text-shadow:none; }` – Greg K. Oct 10 '17 at 23:34
0

Known issue for years (first mentions from 2010). Developers promissed to introduce fix maybe this year. Problem (as I understand) is with enabling directwrite (for for font smoothing) within sandbox.

More here http://www.reddit.com/r/web_design/comments/23cuif/yet_another_chrome_webfont_aliasing_post_why_is/cgvs5j2

or here: https://code.google.com/p/chromium/issues/detail?id=331115

Edit: Using SVG font can help for someone, but SVG is too blured for me (compared with antialiased woff in Firefox).

catt
  • 1
  • 3
0

Specifying the font-weight to 400 fixed the issue completely for me. I think it is intially 700, at least for h2 and h1... 

h2 {
font-family: 'Lobster', cursive;
font-size: 23px;
color:#fff;
font-weight: 400;
}

Firefox still wins, but it is not jagged anymore

Peter Pagh
  • 11
  • 3
  • Yep, problem was with `font-weight`. When I provide LESS import in format of `@import url(http://fonts.googleapis.com/css?family=Open+Sans);`, it seems that `font-weight: bold;` does not work correctly, I had to use `font-weight: 400` instead. – Deele Feb 15 '16 at 09:05
0

Just go reset all flags in Chrome. Type in chrome://flags in the URL address bar and click on the Reset All Flags to default button. That should be on the right hand side of the settings page. It worked for me. If it does not for you, you may try enabling the Aero visual settings of your computer (only if disabled) then reset the flags. If resolved, you may then switch off the aero visuals.

To access the aero visual settings in Win7, go to My Computer properties > Advanced system settings > System Properties > Advanced tab > Performance (Settings). From there, toggle the current setting back to 'Adjust for best appearance (it should check all boxes under it). After resetting all flags and the fonts are back to normal, you may choose to toggle it back to Adjust for best performance. That essentially unchecks all visual options.

Thanks,

Dong

Wookie
  • 1