In the last post I talked about the design aspect of using CSS3 @font-face, today I would like to extend this topic to the technical side on implementing custom web fonts. So what are the options for implementing web fonts? I'm going to review the three main methods of incorporating @font-face and explain the pros and cons of each method.

1) CSS3 @font-face

Standard @font-face

First, let's talk about the native way of implementing custom web fonts — @font-face. The CSS syntax for declaring a custom @font-face is very simple. Basically you just need to specify the font name and font file source. Once the font is specified, you can apply it to any element.


@font-face { 
	font-family: "Custom Font Name"; 
	src: url('font.ttf'); 
}

body {
	font-family: "Custom Font Name";
}

Bulletproof @font-face Syntax

Because every browser supports different font formats (IE supports EOT only, Firefox supports EOT & TTF, and Safari supports OTF, TTF, and SVG), additional font formats are required to be cross-browse. Below is the bulletproof way of implementing @font-face from Font Spring.


@font-face {
	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

@font-Face Generator

If you need to export the fonts in different formats, there is a generator which allows you to generate various font formats from an existing font. Note: most fonts are not allowed to embed or distribute on the web. Check the licensing information before implementing any fonts.

image

Premium @font-Faces

Because most fonts do not allow publishing on the internet, Font Spring offers professional fonts with @font-face support. You can buy licensed fonts individually and use freely on your sites.

Pros & Cons

  • PROS: Full control because the fonts are hosted on your server.
  • CONS: The process is a bit complicated because it requires various font formats.

2) Font Service Providers

Another way of using fonts without worrying about licensing issues is by using the fonts from service providers such as Typekit and Fontdeck. With font service providers, the fonts are hosted on their servers and you have to pay a subscription/licensing fee to use the fonts. The process of implementing host fonts is a lot simpler compared to the native way of implementing web fonts because they handle all the font formats and browser compatibility.

Installing Typekit

To install Typekit, it requires two lines of Javascript.


<script type="text/javascript" src="http://use.typekit.com/are7wnq.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

Pros & Cons

  • PROS: Easier to implement because you don't have to generate the different font formats.
  • CONS: It requires subscriptions. Since the fonts are hosted on the service providers, if their servers go down, the fonts will not be available.

3) Google Web Fonts

Google Web Fonts is also consider host font providers, but Google Web Fonts are free. Google fonts are light weight (they load very fast) and they are easy to use.

Implementing Google Web Fonts

To implement Google Web Fonts, just add the line of code below.


<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

Pros & Cons

  • PROS: Free, lightweight, and loads fast.
  • CONS: Not enough selections and most fonts don't come with different weights and styles.

Conclusion

@font-face is good if you need to use your own custom fonts. Typekit & Fontdeck offer professional fonts in complete sets (styles & weights), but require subscriptions. Personally, I like Google Web Fonts because it is simple to implement and it loads very fast.