I’m sure this has been discussed throughout the interwebs already but it’s a pretty neat trick I learned and thought I’d like to share it.

Normally, when visitors visit a website they see the typical fonts available on their computer.  In css, you would specify a few different fonts in the case that the first or second isn’t available on the visitors machine (e.g.  font-family: Arial, Times New Roman, Serif;). The conventional way of using custom fonts is to create an image using the custom font and slapping it on a page.  Another way was using flash (e.g. Sifr) to embed the custom font.  SEO does not like this. SEO wants you to have as much text on a page as possible, and to be ranked higher on the search engines, having images or flash in place of the text isn’t really an option. This goes especially, if you plan on using custom fonts on the site. CSS has a way for you to use completely custom fonts on a website.  The attribute they provide for this functionality is @font-face. But, before you jump your guns and use it, there a few steps to follow so that it works correctly on all browsers.

There are 2 ways you can implement @font-face.  (1) Use a URL to use a specific font, or (2) you can download the font and use it on the same server as the site, which I will explain here. First, you download whatever font you wish, possibly from a site that distributes free fonts.  Also, make sure the font you download is legally eligible for web embedding, so please honor any EULAs of the font.  Now, with the font you just downloaded, you must convert it to a few different formats for the purposes of browser compatibility.  Some may already be good for all browsers but I follow this step for good measure.  For this, I use fontsquirrel.com.  FontSquirrel has a @font-face generator that will create the necessary font files to solve the issue of browser compatibility.  It will also create the necessary CSS file with the included @font-face attribute which you can copy over to the main CSS file.  With the generated files you have from FontSquirrel, upload them to a folder on the server that is hosting the site and remember to list the correct path to the font in the CSS.

Then in the main CSS file of the site, copy over the @font-face attributes generated from the FontSquirrel.  It should look something like this:

@font-face {
font-family: 'BaroqueScriptRegular';
src: url('baroquescript-webfont.eot');
src: local('?'), url('baroquescript-webfont.woff') format('woff'), url('baroquescript-webfont.ttf') format('truetype'), url('baroquescript-webfont.svg#webfontJvLgwFfB') format('svg');
font-weight: normal;
font-style: normal;
}

Now you can use the font in the CSS ‘font-family’ attribute just like so:

div {
font-family:’ BaroqueScriptRegular';
}

The second way is to find a font hosting site and, similar to the above @font-face example, you just add the URL of the font:

@font-face {
font-family: 'SomeFont';
url(‘http://www.somefontsite/SomeFont.svg’) format('svg');
font-weight: normal;
font-style: normal;
}

And use it the same way as mentioned above.

The only issues I can think of this is that there is a quick flicker as the font loads up onto the page.  Other than that and EULA restrictions mentioned earlier, this is a great alternative to using custom fonts on a website.