Add custom fonts in your website using CSS. Works in IE too

If you are a struggling to add custom fonts to your website the following resources will save you lot of time.

First thing you need to do is to get the font file (ttf and eot) to a sub folder where your website pages are. Simple normally I will create a folder called "fonts" just like "css", "js" or "img" folders.

Why ttf and eot fonts? Simply because ttf works well in Firefox and Google Chrome and eot is for Internet Explorer.

Next question is, where to find eot font files? Don't worry you can convert ttf to eot with this simple application. Now you have two font files.

Now you need to create custom font family using CSS and then apply that font family to the classes or id where you want to use the custom font. This how to article will explain it clearly.

@font-face{
   font-family: myFont;
   src: url('myFont.ttf');
}

@font-face{
    font-family: myFontEI;
   src: url('myFont.eot');
}

Then Attach it as a font family like so...

font-family: myFont, myFontEI;