A while ago you’ve read a quick tutorial here about setting up your website with custom fonts using @font-face. Since then I’ve been thinking to write about these alternative solutions, pros and cons.
The aim of this post is to briefly round up your options when using custom fonts in web design.
CSS3 @font-face
The @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5. However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format until Safari 3.1 was released.
Since then, web designers began to use .ttf or .otf fonts for their websites and now this CSS property is well-known.
CSS
@font-face {
font-family: '3DumbRegular';
src: url('3Dumb-webfont.eot');
src: local('?'), url('3Dumb-webfont.woff') format('woff'), url('3Dumb-webfont.ttf') format('truetype'), url('3Dumb-webfont.svg#webfont57ztNrX6') format('svg');
}
h1
{
font-family: '3DumbRegular', Arial, sans-serif
}
Pros
- A lot of available fonts you can choose from. Check this detailed list.
- It works for all browsers.
- It has no JavaScript dependency.
Cons
- It takes slightly longer to implement than Google Font API (more code).
- Quality of font rendering may differ browser to browser.
- Your CSS may not be validated, depending on your DOCTYPE.
Google Font API
To use the fonts of Google’s font library, just go to http://code.google.com/webfonts and select a font. If you choose “Cantarell” font for example, include the following code into your files.
HTML
<link href="http://fonts.googleapis.com/css?family=Cantarell&subset=latin" rel="stylesheet" type="text/css">
CSS
h1
{
font-family: 'Cantarell', arial, serif; /*Add also some font replacements, just in case...*/
}Pros
- Free solution from Google.
- Quick set up.
- No JavaScript dependency.
- No need to think about font licensing.
Cons
- Small number of fonts to choose from. (just for now, I hope)
- Quality of font rendering may differ browser to browser.
No support for iPhone or iPad.Support added from iOS 4.2+ (iPhone, iPad, iPod).
Typekit
Typekit is a service launched by Small Batch, Inc. which, via JavaScript and a subscription service, allows webmasters and designers to embed non-standard, non-system-specific fonts into online documents. It uses the @font-face CSS property and is available to the public as a paid service.
HTML
<head>
<script type="text/javascript" src="http://use.typekit.com/typekitid.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
CSS
h1
{
font-family: "museo-sans-1", "museo-sans-2", sans-serif;
}
Pros
- Huge fonts library.
- Good support articles and help section.
- iPad, iPhone/iPod Touch support (experimental)
- Control the behavior of your page as web fonts load (thanks @smcbride)
Cons
- Typekit is a paid service but it also has a free version.
- JavaScript dependency, and one extra HTTP request for you.
Other web fonts solutions
Conclusion(s)
Now that you found out all the pros and cons, it’s up to you to choose the method that best suits your needs.
Let me know in the comments the solution you like most!
thanx! really useful typo post
Hey dude
I really enjoy reding this useful article and want to say thank you.
I prefer touse @FontFace as it is well-known and you can wrap it up in css file
Thanks for reading guys, I’m glad you found it useful
Greetings.
@font-face method works with IPHONE and IPAD?
Best regards and thanks for this post.
X.
X3msnake, sorry for my late reply.
Yes, the
@font-facemethod works with Iphone and Ipad – using SVG fonts.You could see a quick web fonts comparison here.
My vote is @font-face, esp. FontSquirrel. It’s free, self-hosted, and has tons of options (including the option to upload your own!).
Google’s still using @font-face rules but they certainly simplify the work by generating the CSS and providing the custom LINK tag.
I’m very interested to see if the .woff font format takes off since that’s what Google is delivering, exclusively. In the meantime I feel I need to keep delivering .ttf and .eot instead to make today’s devices happy.
Indeed, saying “Google Font APIs vs. @font-face” is imho incorrect. Google Font APIs is exactly @font-face. Only difference being that:
* It hosts it for you (no maintenance)
* Has much better caching and allows simultane downloading (different hostname / CDN)
* Shared among websites that use the same websites (faster loading for clients)
and one more advantage, which answers Peter’s concern:
* It detects your browser and only delivers the one font-type that browser needs (e.g. svg, ttf, woff, ..) it does NOT exclusively deliver woff.
I have an example of using the Google Fonts API in one of my blog entries (http://enterpriseyness.com/2011/07/integrating-google-web-fonts/) and it works fine with the iPhone browser.
Thanks for the heads up! At the time I wrote this article, iOS 4.2 was not released yet.
I just updated the article as Google Fonts API now works for iOS 4.2+ (iPhone, iPad, iPod).
There is a delay in display when we use Google fonts. Even though it is a minor delay but it could adversely effect the overall smooth experience of the user. I noticed that chartbeat.com is using typekit and there is no delay in rendering on chartbeat.com. This has anything to do with Google font being free and typekit a paid service? Some sites us backup font, which displays the text in default font till the font from Google is ready. Even in this case there is a change of text font after the page is displayed (http://thehaus.tv/about). Is there any way that we can reduce the delay of text rendering using Google fonts?
Amit, either way, you should always use fallback fonts.
To find out more about the effect you’re talking about (FOUT), read more here and here.
The delay is not specific to Google Font APIs really. Self-hosted @font-face (or any other solution realistically speaking) will have FOUT unless you take the precautions on your end. This can be prevented by either forcing the fonts to load from the HEAD-element in a blocking way (downside: delays rest of the page), or by setting those headings to visibility-hidden in CSS until the fonts are loaded.
I’m making a 24 fan site and just used the @font-face tutorial to add a font to the site. It’s made it feel more professional. Great tutorial, a real help.
Typekit all the way. I pay $49.99 per year for a pro license and get unlimited use of every single font in their library. In my opinion there’s no alternative that comes close to this variety and really, $49.99 per year is nothing when you consider that you can use the library on as many sites as you like and get to charge your clients more than that per hour when designing sites. No-brainer, if you ask me. :)
Totally agree. You get what you pay for, and Typekit is the leader, hands down. No delay, stunning selection of fonts, and cheap.
I personally choose @Font-face option and Google API.
They both offer fast and almost unlimited possibilities of font selection and much cheaper than typekit.
I must admit that I’m also a Google API fan!
I mostly used font-face. Upload my font using this generator http://www.fontsquirrel.com/fontface/generator or use their font-face kits.
Somehow, there are fonts that will not be generated because of the license.
vote for CSS3 Font-Face
I really enjoy reading this useful article and want to say thank you. ♥