Typographies from Google Font API

Tangerine Font from Google's Font API

One of those things we can’t customize as we wish in our website are the typographies, it’s really annoying because sometimes our style is not complete until we just “pimp out” the fonts. That is because all content displayed by the web browser is rendered using the fonts available in visitors machine.

There are many techniques we can use to customize the typographies in our website, here we will dig into the most known.

Technique #1: Image Replacement

This is one of the oldest techniques and of course the one we do not recommend you to use. It’s called FIR (Fahrner Image Replacement) and consists in using images to replace the text, it’s heavy, tricky and worst screen readers and search engine robots don’t love it, so your content will not be indexed into their search results.

Technique #2: The @font-face CSS Rule

This rule is available after CSS version 2, it works downloading TrueType (.ttf) proprietary fonts or OpenType (.otf) open fonts from a given source to display the content of a website. It’s really simple to use nonetheless it’s not supported by all web browsers. To use it you just have to set the font rules and the source where the font chosen will be downloaded:

 @font-face {
font-family: "My-Font";
font-weight: bold;
src: url('fonts_directory/my-font.otf');
 }

Technique #3: Scalable Inman Flash Replacement (sIFR)

This technique uses JavaScript, CSS and Flash to replace the default typography, basically it works like this:

When the user requests your website a JavaScript function looks into the users system to find out if the Flash plugin is available or not.
If the plugin wasn’t found, JavaScript shuts itself down and the content of your website will be displayed with the font by default. Else the JavaScript function will take the dimensions of each tagged element.
Once the dimensions are taken JavaScript will make a flash movie with the same size as each element found and will overlap the original elements with it, taking the original text as a variable into flash.
Inside the flash movie, an ActionScript function will take the text and will drawn it with the font selected.

This will take a few seconds and will be invisible to the visitor, it will also work with screen readers and search robots will index the text replaced too.

Technique #4: Cufón

Cufón is intended to be a replacement for sIFR, its goals: being faster, easier and of course keep the cross-browser compatibility. Here’s how it works:

We upload a font from our machine through their website which transform the font file into an SVG file.
Next it takes the SVG file and transform it into a VML file.
When the VML file is ready it’s converted into JSON and displayed into the web browser using JavaScript.

Technique #5: Google Font API

There are many other techniques available to modify the typographies in our websites, there is a new Google project called Font API. It’s free and open source, it has its own fonts directory, this technique is based in CSS and here we explain you how to use it:

 # 1.- Import the CSS file with the selected font
 # All fonts available can be found in the Google Font Directory
 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
 # 2.- Then just give the style to each element
 css_element {
font-family: 'Font name', serif;
 }
 # Remember using a generic font like serif just to avoid
 # unexpected behaviors.