Google getting into the Web Fonts game?

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.

By Adam Pope

Adam is our tech God, and it's not just his name that's holy - his knowledge of code borders on the supernatural, and whilst he doesn't like to brag, he finished top of his class at university. (Yep, the very top).

When he isn't crafting masterpieces on the web he is knocking them up in the kitchen, his legendary curry being an office mainstay here at Storm.

Adam was recently named as one of South West Business Insider's 42 under 42 for 2012.

stormconsultancy.co.uk →

16 comments

  1. Adam- I say you have uncovered something big! I’m guessing that we’ll be hearing about this at Google’s I/O conference.

  2. Isn’t this likely to be because Droid is a Google font designed for Android? Makes sense to call it from Google’s servers where it will always be up to date and highly likely to be available.

    David

  3. Purely speculation, but I’d imagine this would be for free fonts only. Type foundries won’t let Google give away their fonts for free, so the only way this would be a rival for TypeKit, etc, is if they start charging.

  4. @DavidHughes – I hadn’t considered that, but I have a feeling this is part of something bigger. I think it’s part of their ‘Speed up the web’ campaign, there’ll be something about it that makes it faster than TypeKit et al.

  5. @PeterGasston – You may well be right. But then, Google has a habit of taking things that should be worth money and giving them away for free! But, even if it is just free fonts, it’s an interesting move!