I recently started experimenting with both the Google font API and @fontface in my designs. Now that @fontface is supported by the majority of browsers I think it is time to start playing with it and pushing web typography further.

The Google Font API

Google Font API

Google is offering their own free solution to web typography. The service is in beta now so there may be changes. I have used this service for a couple of personal projects and I can say that it is very easy to use. The real downside to it right now is the lack of available fonts. There are only about 18 fonts to choose from right now but I am sure this will change.

To use the service you just choose the font you want to use from the font directory, then click the get the code tab, choose any options you want (italic, bold, normal, bold italic), then copy and paste the link into the head of your document. You can also import the font directly into your style sheet with javascript, using the web font loader API. There is more documentation about this if you click the advanced techniques link at the bottom of the fonts page.

The link code that is generated would look something like this

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

All in all the interface is easy to use and simple to implement, all that it is missing is variety.

@fontface and Font Squirrel

Font Squirrel

There may be other services out there offering free fonts for web use, but this is the one I am most familiar with. Font Squirrel not only has a variety of fonts you can use for free on your personal or commercial projects, but they take it a step further and package the fonts for @fontface. After spending hours trying to convert fonts to all of the formats that are required (especially the ones for IE since right now there is no standard) to use this service , finding Font Squirrel was a god send. Also if you have a font that is licensed to you, Font Squirrel also has a tool that will create the package for you. I cannot vouch for how reliable this service is as I didn’t use it, I chose one of the pre-packaged font sets.

Embedding the fonts yourself takes a little more time than using the Google service however the number of options you have and the quality of options you have make this technique a little more appealing at the moment.

You can think of adding a font to your site kind of like adding a background image to it. First I created a directory on my server for fonts named, you guessed it, fonts. I then copied the contents of the Font Squirrel package, sans the html and css, into that directory. Now that the fonts are there you have to tell your document where they are and what they are called. You should go ahead and create a new styles sheet named fonts that will be included in your document above the actual styles for your site. This way the fonts are already loaded when you call them.

<link rel="stylesheet" href="/css/fonts.css" type="text/css" />
<link rel="stylesheet"/css/style.css" type="text/css" />

In your fonts CSS you will add the location of the font files. The most important thing is that the IE font is first. You know how we love to bend over backward for Microsoft. Below is how your @fontface could look, although I have seen several ways of doing this.

@font-face {
	font-family: 'BebasNeueRegular';
	src: url('../fonts/BebasNeue-webfont.eot');
	src: local('☺'), url('../fonts/BebasNeue-webfont.woff') format('woff'), url('../fonts/BebasNeue-webfont.ttf') format('truetype'), url('../fonts/BebasNeue-webfont.svg#webfont2iOQGOJ3') format('svg');
	font-weight: normal !important;
	font-style: normal !important;
}

Font-family specifies the name of the font. You can use whatever name you would like, most people I think will choose to use the fonts real name, however you could call it dirt-bike-awesome-sauce if you wanted to. The first src is for IE, which insists of course on using the .eot extension which stands for embedded open type (this must always be first). There is a tool provided by Microsoft that will convert Truetype fonts to eot fonts. You might have better luck conquering the problem of world hunger than using their tool, however if you wish to give it a shot it is called WEFT and you can find it here. The second source is for all other browsers. Local checks to see if you have the font on your machine, in which case it will use it. If the font is not on your machine it will go through the urls until it finds an extension it can use. After that we set the font style and weight.

Now all that is left to do is to define which elements will use it, just like any other font. Open up your style.css and add this code there.

h1, h2, h3, h4, h5, h6{ font-family:'BebasNeueRegular',Helvetica, sans-serif;}

Thats it we are done. I used this technique for all the headers on my site. Previously I had been using images, which were a hassle to change if I needed to. This opens up many great possibilities for designers because it gives them the freedom to use any font they want for any project. As CSS3 is standardized I am hoping that the markup is simplified, however I think this is something that designers should be experimenting with now.

What do you think about these solutions? Are there any other ones out there that you have experience with? Tell me about them.