CSS @Font-Face: which website to choose?

Posted on Thursday July 12, 2012 / by Eric Potvin

I wrote an article, back in April 2012, on how to enhance your website with @Font-Face using the Google font library.

A little while after, I wanted to change the font and I couldn't find one I liked from the library so I started to search for other websites that provides the same service and hopefully, get one I like. Here's the highlights of my research.

Google Web Fonts

Google made a very easy interface to select any fonts you like, and use. Simply go to http://www.google.com/webfonts/ and select a font, preview and use it!

Usage

<link href='http://fonts.googleapis.com/css?family=Devonshire' rel='stylesheet' type='text/css'>
h1 {
  font-family: "Devonshire", Arial, serif;
  font-weight: 400;
}

What I like about Google Web Font:

What I don't like about Google Web Font:

TYPEKIT

Typekit, an Adobe company, provides font library using JavaScript and a yearly subscription service.

Usage

<head>
  <script type="text/javascript" src="http://use.typekit.com/typekitid.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
h1 {
  font-family: "museo-sans-1", "museo-sans-2", sans-serif;
}

What I like about Typekit

What I don't like about Typekit

Fonts.com

The Fonts.com™ store from Monotype Imaging offers more than 150,000 font products for you to preview, purchase and download. You can also learn about new typeface releases and discover typographic tips and techniques.

Usage

<script type="text/javascript" src="http://fast.fonts.com/jsapi/31f2a333-540b-409f-ab46-cd941e2d8d1b.js"></script>
h1 {
  font-family:'Brush Script W01 Medium';
}

What I like about Fonts.com

What I don't like about Fonts.com

FontDeck

FontDeck is standards compliant, accessible and uses a pure CSS @Font-Face solution. No JavaScript required.

Usage

<link rel="stylesheet" href="http://f.fontdeck.com/s/css/D8Fz3XWt+VC0VDejQHe7Mks5Qzc/yopmail.com/21632.css" type="text/css" />
div {
  font-family:"Ronsard Crystal Light", "Arial Black", Arial, Verdana, sans-serif;
}

What I like about FontDeck

What I don't like about FontDeck

I still believe the Google Web Font is the best solution if you don't want to spend lots of money. I am sure eventually, they will add more fonts to their library.