Firebug shows fonts preview

Removing WordPress web fonts for Vista users

“To increase readability and attractiveness, Twenty Twelve features the gorgeous Open Sans typeface. Refreshingly different from the basic web fonts of yesteryear, this font spruces up your prose and gives your content a modern, clean look.” ♦ Lance Willett, WordPress.com

Little did I know how awesome Twenty Twelve WordPress theme was, when I decided it was time to do something about those blurry unreadable fonts. Searching the Web did not offer much help at first: most complaints about the fonts were related to them lacking international character sets. But then…

There I saw someone telling my story on support forum: http://wordpress.org/support/topic/twenty-twelve-open-sans-looks-awful-in-firefox. The post mentioned that it happened on a Vista computer. And it gave me an idea to visit browsershots.org and check how my blog looks in different browsers on other operating systems. And it all became clear then.

What happens

Poor web font rendering by Firefox on Vista computerThis is the blurred font I see on Vista, when using Firefox, Opera or Chrome browser (magnified word is just an editor zoom):

Chrome fornts rendering on Windows Servier 2008

This is how the same browsers would show a web font on Windows Server 2008

Firefox font rendering on UbuntuAnd this is what you expect to see, and what you would see in most other situations – including when you use Internet Explorer on Vista or Windows Server 2008.

Why would I mention Windows Server 2008? It is a server edition of Microsoft Vista operating system. When it comes to graphics, Vista is configured to use most of graphics tricks available, while server edition is the opposite. But the common feature of both was a presence of an whole set of most innovative graphics tricks under the hood. One of them was related, AFAIK, to repositioning and rescaling of raster images painted by applications, before images were rendered on screen.

Obviously, IE team was well aware of Vista graphics innovations, and took care to avoid any side effects – but other browser vendors… did not.

The fix

Firstly, why should anyone care? According to wikipedia, Vista is used by barely 4% of users. Which translates to about 2% of WordPress sites visitors, or 4% of developers, who may have reasons to complain. Well, I am one of those 4%…

To fix this problem, obviously web fonts just should not be used when a non-IE browser runs on Vista or Windows Server 2008. That’s all. And it rather be detected on the server, in one place. But I am not familiar with WordPress internals, so here is my “client-side” solution.

Sample of fFirefox rendering Verdana as a replacement fontFirstly, decide, what Vista font you want to use as a replacement for web fonts in your theme; you can have a look at Microsoft site. I decided on Verdana: it was designed for the web.

Now prepare a CSS file – let’s call it OpenSansReplacement.css – and copy to it the contents of the CSS file which contains the @font-face definitions. For Twenty Twelve theme, the contents is listed below, but for other themes, you need to find the reference to the CSS file, open it, and copy the contents. In this file, replace all remote addresses with local definitions for your Vista font. Here is what you would prepare for Twenty Twelve theme:

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Verdana');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Verdana Bold');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Verdana Italic');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local('Verdana Bold Italic');
}

Upload the file to the theme root of the site: /wp-content/themes – it may later be reused by several themes.

Now you can add a small script to the header of the theme, which will detect the browser and override the web fonts definition of your theme. To do this, if you are not using a child theme, create it first, as described in this WordPress tutorial. If your child theme does not contain functions.php, create it, then open it for for editing and add this code:

<?php
add_action( 'wp_head', 'add_web_fonts_replacement' );
// For Vista, allow only IE to use web fonts
function add_web_fonts_replacement() {
    ?>
    <script type="text/javascript">
      // return true to override web fonts with plain local font
      function _noWebFonts() {
        var agent = navigator.userAgent.toLowerCase();
        // is it Vista? 
        if (agent.indexOf('nt 6.0')<0)
          return false;
        // on Vista, only if it's not IE
        return agent.indexOf('msie')<0;
      }
      if (_noWebFonts())
         document.write('<link id="web-fonts-replacement" media="all" type="text/css" href="<?php echo get_theme_root_uri(); ?>/OpenSansReplacement.css" rel="stylesheet">');
    </script>
    <?php
}
?>

And test it!

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmail

Leave a Reply

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