Embedding custom fonts on a website has always been a problem, but thanks to Javascript and especially jQuery, things are getting solved one at a time. Cufón Font Replacement is now the most popular way to use custom fonts and appeared as a very efficient alternative to the old SiFR, which was very tricky to use. Now, thanks to Google, developers have another alternative to font embedding and is called Google Font Directory.

How to Implement Cufón

Step 1: Download Cufón

Implementing Cufón is very simple and doesn`t require too much knowledge. First step is to visit Cufón Website and download Cufón. Right-Click on Download and Save It on your desktop.

Step 2: Convert a font

The font I`m going to implement is Yanone Kaffeesatz, an elegant and clean font and you can download it from FontSquirrel.

Go back to Cufón and continue with the steps on the website. If you want, you can use the bold and italic files as well.

The next step is to include the glyphs. Don`t hit All, choose only what you need. This way you`ll keep the javascript file to a reasonable size.

Now hit “Let`s Do This” and download the javascript file generated by the app.

Step 3: An example

Now that you have the javascript files, let`s implement them into a page. Create a new folder called “js” and place the cufon javascript files inside it. Create a html file too.

Open the index file in your favorite code editor, add the basic HTML tags, and then reference your two Javascript files just before the “” tag. If you`re going to apply the tutorial to a website, you`ll probably use the custom font only for titles. For this, you have to import jQuery just before the Cufón files.

My entire code looks like this:

Explanations:

• Lines 8-15: The javascript files are called; the first file which is called has to be the jQuery library in order to make it work.
• Lines 17-19: The Cufón javascript function asks cufon-yui.js to replace any existing h1 inside a div called “content” with the custom font.
• Lines 21-25: styling options of the #container h1
• Line 29: a normal h1
• Line 30: the targeted h1 which will be written with the custom font.

The result:

Implementing Google Fonts

Another way to implement a font into a website is to use the Google Font API.

To help developers, Google has created the Google Font Directory. There you can browse a catalog of available fonts and copy the code required to use them on your web page.

Browse the fonts and select any font you want to implement. I“m using the same font, Yanone Kafeesatz

If you`re not decided, you can even preview fonts inside the Font Previewer.

Go back to the font and hit “Use this font”. There you`ll find the code which generates the custom font.Also you`ll have variants and you can use all of them. API will generate the necessary CSS specific to the user’s browser so you can use the font on your page. Simply use the font in your CSS font stack like any other font.

For our example the code looks like in the picture:

Explanations:

• Lines 8-9: We called the CSS library generated by the Google API. Notice that the file is on Google servers so this is a plus because the fonts will load faster.
• Line 15: the CSS code used to apply the font to the desired text, in our case, the h1 inside the “#content” div.

The result is the same with the one generated by Cufón

Conclusions:

Using custom fonts never been so easily and I`m sure that the technology will evolve even more.Cufón is a nice way to add any font, but because is using Javascript technology, selecting the text is a problem. Cufón doesn`t allow font selection. On the other hand, Google supports text selection. Still, Cufón remains the most used font-replacement tool because of its capability to embed any font. Google has to work harder to improve their font library by adding more and more fonts to the database.

Hope you enjoyed the lesson and implemented some fonts and I look forward to hear which way you like more:Cufón or Google Fonts!

Related posts:

1. How to: Display Adsense After The First And After The Any Post In WordPress Blog
2. The 20 free fonts most used in the corporate design
3. Beautiful Fresh Free Fonts for Designers