Embed font family using CSS3 – cross browser compatible

Sometimes you’ll come across that client that insists on having that non internet friendly font used on their website. Luckily by using CSS3 you can now embed the font required.

In the below code i have embeded the font family Dartangon. Simply copy the TrueType font (.ttf) file and the OpenType (.eot) font file into the same directory as the stylesheet, then refference to it like this:

<pre>@font-face {
 font-family: DartangnonITC;
 src: url("DartangnonITC-Regular.eot") /* EOT file for IE */
}

@font-face {
   font-family: DartangnonITC;
   src: url("DartangnonITC-Regular.ttf");
}

The top code section where we use the .EOT, that handles IE support, the bottom covers most other browsers. All you need to do now is specify where the font should be used. Below i have added it to a class called “special”.

/* Dartangnon font family styling */
.special {font-family:DartangnonITC; }

Hope this helps. Nathaniel

%d bloggers like this: