Skip to content
Storm

Back to news

Google getting into the Web Fonts game?

Storm News.

19.05.2010 - 2 min read

Earlier today I was on Smashing Magazine when I saw something strange in my status bar.  As I watched the hostnames flash by as the page loaded, pulling in resources from numerous sources, my eyes stuck on one in particular: fonts.googleapis.com. So, I pulled up the source of the page and  right there, on line 3, was a link element pulling in CSS from fonts.googleapis.com!  The request is for a font called ‘Droid Sans’ in regular and bold.

<link href='http://fonts.googleapis.com/css?family=Droid Sans:regular,bold' rel='Stylesheet' type='text/css'/ >

I dug a little deeper and had a look at the source of that CSS file and found:

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'),
       url('http://themes.googleusercontent.com/font?kit=POVDFY-UUf0WFR9DIMCU8g')
       format('truetype');
}
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: bold;
  src: local('Droid Sans'),
       url('http://themes.googleusercontent.com/font?kit=EFpQQyG9GqCrobXxL-KRMVtXRa8TVwTICgirnJhmVJw')
       format('truetype');
}

From this evidence it’s looks very much like Google is getting into the font serving business alongside current providers such as: TypeKit and Fonts.com.  You have to assume that this is bad news for those guys as Google is highly likely to be offering this service for free, where a subscription is currently required for high volume use.

Update: Google has now officially announced this as the Google Font API with the Google Font Directory – you heard it here first!

However, it turns out this isn’t  a move to dominate the Fonts market – instead this is a collaboration.  Google has been working with TypeKit to produce the WebFont Loader – A JavaScript API to make loading web fonts faster.  Google have posted an example of using the new API – perhaps controversially, it introduces a little bit of noise into your CSS.

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
    </script>
    <script type="text/javascript">
      WebFont.load({
        google: {
          families: [ 'Tangerine', 'Cantarell' ]
        }
      });
    </script>
    <style type="text/css">
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px
      }
    </style>
  </head>
  <body>
    <h1>This is using Cantarell</h1>
    <p>This is using Tangerine!</p>
  </body>
</html>


However, the new loaded is able to load fonts from both Google and TypeKit simultaneously:


WebFont.load({
    google: {
      families: [ 'Tangerine', 'Cantarell' ]
    },
    typekit: 'myKitId'
  });


A move that will drastically improve the load times of web fonts as users being to have a cached version of the webfont.js file in their browser!  Currently, each TypeKit user has to include a unique JavaScript file on their site, eliminating any caching potential.

Related news.