general related post

Embed font family using CSS3 – cross browser compatible

categories:CSS3, Development
tags:

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:

@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 handle IE support, the bottom covers most other browsers. All you need to do now is specify where the font should show. Below i have added it to a class called “special”.

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

Hope this helps. Nathaniel


Leave a Reply

Please note that if your comment is in no way related to the contents of this post it will not be published.

D2C Services

HTML, CSS, JQUERY, PHP, Wordpress, Codeigniter, Expression Engine.

What ever your CMS or need D2C can develop it for you

PSD to HTML, PSD to Worpdress theme, PSD to Expression Engine.

You Design we Code, let us give life to your PSD

Custom Online Application Development.

Contact us to build your custom CMS, Project management system or Intranet.

Contact D2C

Call D2C on +27 72 333 0239 or fill out the below form

loading