Say Goodbye To Using JavaScript or Flash Replacement For Custom Fonts
Tired of learning all those different techniques for using non standard websafe fonts? Want to reap the performance rewards of loading a real font? Then look no further than the all css @font-face rule.
The @font-face rule has been around for quite some time, even Internet Explorer 4 supports it. But different browsers need different font file formats. In this article we will show you exactly what css to use, how to get the right fonts for each browser and which ones to use for which browser.
Introduction
I found an article about this on Themeforest blog and decided to try it out. I loved it so much I decided to write my own little article on it.
With my testing I found this worked in all browsers but not in FireFox 3.x. Although this has been rectified in FireFox 3.5.x. Which is quite a shame, but I think that its safe enough to start using at any time.
Getting Started
So what will you need to make this work on your website? You will need a TrueType (.ttf) format of your font to start off with, then you will need to go to the Font Squirrel website and use their @font-face kit.
This kit will generate a zip file with all necessary fonts that you will need. All of these fonts are essential to allow for complete cross-browser compatibility. The kit also generates a demo.html file and a stylesheet.css file. The folder will look a little like the image below (Windows users will see a slightly different looking folder but all of the files will be the same).
Font Squirrel Generated Files
If you open the css file you will see something similar to this. I have tidied this up for performance in Safari.
@font-face {
font-family: 'Marydale Bold';
src: url('marydbol.eot');
src: local('Marydale Bold'), local('MarydaleBold'),
url('marydbol.ttf') format('truetype'),
url('marydbol.woff') format('woff'),
url('marydbol.svg#MarydaleBold') format('svg');
}
The font we are using in this example is Marydale Bold. As you can see in the CSS the font family attribute is the desired name of the font. This name is something that the generator has created. I think this is a good name so we will leave it as is.
The next attribute is the source of the font file. The first source attribute is the eot file format which is used by internet explorer. After that there is a new source attribute, but slightly different. This source includes local, which will check to see if you have the font on your machine, otherwise it will use any of the following font files that any other browser such as Opera, Firefox, Webkit based etc.
After this has been done you can apply the font as you would with any other selector. See our example below on:
h1 {
font-family: "Marydale Bold", Georgia, serif;
}
As you can see in the above code example, we have assigned a Heading One the Marydale Bold font with Georgia as a fall back and a further fall back of a generic serif font.
Go and give it a try. No JavaScript, no flash, just pure font.
Resources