CSS @Font-Face: which website to choose?
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:
- Free solution from Google
- Quick set up
- No JavaScript dependency (if you choose the non-JavaScript method)
- No need to think about font licensing
- Can be used as CSS or CSS import or JavaScript
- Support added for mobile devices like iPhone, iPad, iPod, android etc...
What I don't like about Google Web Font:
- Small number of fonts to choose from. (just for now, I hope)
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
- Good font library
- Good font customization options
- Mobile devices compatible
What I don't like about Typekit
- JavaScript dependency
- Yearly subscription
- Limited page views per month (specially if you have lots of traffic)
- No free account
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
- Hude font library
- Free account
- Customize your account/month pricing
- Mobile devices compatible
What I don't like about Fonts.com
- Expensive if you have lots of traffic
- Limited fonts for the free account
- JavaScript dependency (for free account)
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
- Nice font library
- Free account
- Free for the first 1,000,000 page views
- No JavaScript library required
- Mobile devices compatible
What I don't like about FontDeck
- You pay PER font PER year
- Pay after 1,000,001 page views
- Free account limited to the first 20 visitors
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.