How To Use Your Custom Font On Your Website?

1 Flares Twitter 1 Facebook 0 Google+ 0 Filament.io 1 Flares ×

With the use of simple CSS, you can easily use your custom font on your website. But many people find problem getting it work on Internet Explorer. Here is the trick that works across all the browsers. I hope this solution will help many people who are stuck with this problem. I will explain it with a simple example:

CSS Code:
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘fonts/Ayuma2yk.eot?’), /* IE */
url(‘fonts/Ayuma2yk.ttf’);
}

‘MyCustomFont’ is the name you want to give to the font family. It is recommended to copy fonts to a separate folder. Ayuma2yk.ttf is a random test font I have used for example.

For Internet Explorer, please note the important tricks here:
1) Instead of common ttf (True Type) font, Internet Explorer requires .eot (Embedded Open Type) font. If you do not have eot, there are so many tools available online, using which you can easily convert your .ttf file to .eot.

2) Use .eot line first. Yes, write the .eot property before .ttf to make it work in IE.
3) Use a question mark after eot font name! Now this is weird, isn’t it?

That’s all. The custom font family is ready to be used now. You can use it normally like you use other fonts.

span style=”font-family:MyCustomFont;”>Hello World!</span>

Please Download an example created with HTML/CSS using the link below.

Download Sample
1 Flares Twitter 1 Facebook 0 Google+ 0 Filament.io 1 Flares ×

Comments

Leave a Reply to Jignesh Rathod Cancel reply

Your email address will not be published. Required fields are marked *