CSS3 @font-face solucions. Typekit vs Google Web Fonts

Not exactly  new to CSS3, @font-face was first proposed for CSS2 and has been implemented in Internet Explorer 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format. With the release of Safari 3.1, however, website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages.

To use web fonts, each form of the font family must be declared using the @font-face rule.

Here is a quick example, to use both regular and italic forms of “MyCoolFont”, you would put the following in your stylesheet:

@font-face {
font-family: MyCoolFont;
src: url('MyCoolFont-Roman.otf');
@font-face {
font-family: MyCoolFont;
font-weight: bold;
src: url('MyCoolFont-Bold.otf');

Then call it using font-family.

h3 { font-family: MyCoolFont, sans-serif; }

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.

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 */

If you need to export the fonts in different formats, here you can find some generators 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.

A way of using fonts without worrying about licensing issues is by using the fonts from service providers such as Typekit. 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">// <!&#91;CDATA&#91;
// &#93;&#93;></script>

Easy to implement because you don’t have to generate the different font formats, but it requires subscriptions. Since the fonts are hosted on the service providers, if their servers go down, the fonts will not be available.

Using 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 rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Free, lightweight, and loads fast, but not enough selections and most fonts don’t come with different weights and styles.

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

Leave a Reply