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 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.

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.

Implementing Google Web Fonts

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.