Found this useful? Love this post
27
google-chrome-windows

Some solutions to font-face rendering poorly in Windows Google Chrome

If you’re on a windows machine using Google Chrome, you may have noticed your fonts might not have been rendering as crisply as you would like.

google-chrome-windows-font-issue

As you can see with the screenshot above: the edges are jagged, font isn’t smooth and inconsistencies in the font weights.

Unfortunately, this is known issue, and has been for quite some time on the Chromium development forum (Issue 25541: DirectWrite support).

Pure CSS Solution

A quick workaround is to serve SVG fonts.

Assuming you already have your CSS from Font Squirrel or somewhere similar, it should look something like this:

@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont.eot');
    src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/myfont.woff') format('woff'),
    url('fonts/myfont.ttf') format('truetype'),
    url('fonts/myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

All you need to do is add the following after the initial font-face declaration:

/*FIX FONT FOR GOOGLE CHROME ON WINDOWS*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'MyFont';
        src: url('fonts/myfont.svg#myfont') format('svg');
        font-weight: normal;
        font-style: normal;}
}

This rule will only apply to browsers that are built on webkit (Safari and Chrome) and override the previous declaration.

While the media query works just fine, it also applies it to Google Chrome for Mac, Safari and iOS browsers. These browsers render fonts just fine but let’s be honest, the rendering of SVG fonts is usually no-ones first choice.

Alternative options

The SVG solution worked a charm in Windows Google Chrome. But then the quality of the SVG font rendered in Google Chrome for Mac was worse than what it was prior to the override. And so the cascading effect continued (pun intended).

However, I found it was best to simply target the browser and OS that had the initial issue. Unfortunately, you can’t target browsers or operating systems with pure CSS, so we can only achieve this with either our server side language or javascript. Quick solutions are outlined below for both methods.

Using HTTP headers

Assuming you have server-side access, this method detects the user agent string and serves an additional css file (or inline CSS) containing the SVG font rules.

The standard user agent string for Windows Google Chrome is:

Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1667.0 Safari/537.36

From the string above you can do quick regex for “Windows” and “Chrome” in your server side language to then conditionally serve the required CSS.

In PHP, it would look something like this:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'Windows') && strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome')) {
    echo '<link rel="stylesheet" href="path-to-file/windows-chrome-fix.css" type="text/css" media="screen" />';
}

Using JavaScript

Using the user agent again as in the same method above, we’ll look to match Windows and Chrome. Once a match is found, we can either insert inline CSS or a link to a CSS file:

if(navigator.userAgent.match(/Windows/) && navigator.userAgent.match(/Chrome/)) {

        //Load a stylesheet
        document.getElementsByTagName("head")[0].innerHTML += '<link rel="stylesheet" href="path-to-file/windows-chrome-fix.css" type="text/css" media="screen" />';

        //Write the CSS change using inline styles
        document.getElementsByTagName("head")[0].innerHTML += "<style>@media screen and (-webkit-min-device-pixel-ratio:0) {@font-face {font-family: 'MyFont';src: url('fonts/myfont.svg#myfont') format('svg');font-weight: normal;font-style: normal;}}</style>");
}

Conclusion

Yup, Google Chrome for Windows sucks when it comes to rendering fonts. However, based off the Chromium forums, it looks like this bug is getting close to being solved

Subscribe

You'll only get 1 email per month containing new posts (I hate spam as much as you!). You can opt out at anytime.

Categories

Leave a Reply

Your email address will not be published. Required fields are marked *

Preview Comment

6 Comments

  1. RaoYv
    http://bit.ly/1h7YdCT#comment-682

    RaoYv

    Windows Registry editing fixed the font thickness issue for me completely,
    we can tune the font thickness/darkness by calibrating FONTSMOOTHINGGAMMA value to
    between 150 and 190 hexadecimal( 336 to 400 decimal )

    – START -> RUN -> REGEDIT
    – search for FONTSMOOTHINGGAMMA by keying “Ctrl F”
    ( will automatically take us to CurrentUser\ControlPanel\Desktop path)
    – double-click mouse on FONTSMOOTHINGGAMMA enter any
    thing between 150 and 190 hexadecimal.
    (the Lower the value, the thicker the fonts.)
    – close the REGEDIT tool
    – LOGOFF and then LOGON

    Now all the fonts are very thick & very dark in Chrome Browser.

    But we must make sure that ClearType smoothing is enabled in Windows
    ( controlPanel -> personalization -> appearance
    -> Effects -> ClearType smooth check (ticked box) )

    OR alternately in RegEdit …

    FONTSMOOTHING=2
    FONTSMOOTHINGTYPE=2
    FONTSMOOTHINGORIENTATION=1 for LCD-screen, 0 for CRT-screen

    • Dom Sammut
      http://bit.ly/1h7YdCT#comment-684

      Dom Sammut

      Hey RaoYv,

      Thanks for this solution. While this will work, we can’t expect the user to make these changes as it’s too complicated for the majority of them or they simply don’t care.

      Still, it’s good to see there is a workaround!

      Cheers
      Dom

      • Lauren Fages
        http://bit.ly/1h7YdCT#comment-990

        Lauren Fages

        Hello, i bought the font sackerlightroman on myfonts. In mac it is beautiful but with windows it’s really not good at all. They did’nt gave me a .svg so I don’t know how to generate it…
        I ask myfonts to help me but they don’t want.
        Can you please tell me what solution I have?
        Thanks in advance.

        Lauren

  2. Abhijeet Sapre
    http://bit.ly/1h7YdCT#comment-100

    Abhijeet Sapre

    not working on my pc this solution, why is it so, I am doing the same as you have mentioned and I am using the Raleway font and I have generated the font-kit from font-squirrel website for the raleway web font, but then also it is showing rendered font in chrome browser, please help

    • Dom Sammut
      http://bit.ly/1h7YdCT#comment-101

      Dom Sammut

      Hey Abhijeet,

      I assume you’re referring to your website (multia.in). When I had a look at your stylesheet here: http://multia.in/googlefont/assets/css/style.css

      For the SVG solution, when you use the @media screen and (-webkit-min-device-pixel-ratio:0), you need to just declare the svg font and not the others, e.g:

      
      /* 
      Normal font-face declaration 
      */
      @font-face{
          font-family: 'Raleway', sans-serif;
          src: url('../assets/fonts/raleway-medium-webfont.eot');
          src: url('../assets/fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
          url('../assets/fonts/raleway-medium-webfont.woff') format('woff'),
          url('../assets/fonts/raleway-medium-webfont.ttf') format('truetype')
          url('../assets/fonts/raleway-medium-webfont.svg#Raleway') format('svg');
          font-weight: 500;
          font-style: medium;
      }
      
      /* 
      Webkit only SVG override for the same font, 
      notice we aren't including truetype, opentype or woff fonts 
      */
      @media screen and (-webkit-min-device-pixel-ratio:0) {
          @font-face{
              font-family: 'Raleway', sans-serif;
              src: url('../assets/fonts/raleway-medium-webfont.svg#Raleway') format('svg');
              font-weight: 500;
              font-style: medium;
          }
      }
      
css.php