Alaa Badran

For web developers and web designers who want to add their FONT to websites without using Standard Web Fonts and without making text as images.

Google has create a Google Font API for public use to give web developers and web designers the ability to use extra fonts on the web, not only the standard web fonts.

Because of this, i was trying to apply a custom font, to use it in my website. I mean by saying a custom font: upload font to my website to let visitors see this font. This custom font could be any font face, or font family.

CSS 2 and CSS 3 gave browsers the ability to download and use TTF file formats.
But as we all know Internet Explorer “IE” don’t accept that.

The CSS code used to apply the custom font as following:

<style type="text/css">
@font-face {
font-family: CustomFont;
src: local('CustomFont'), url('myFont.ttf') format('truetype');
}
</style>


The above code won’t work on any version of Internet Explorer. Why is that?
And how to use this custom font on the buggy Internet Explorer?

1) After searching how to use custom fonts on IEs, I found that Internet Explorer does not accept TTF file types. IEs only accept EOT file types.

2) IE 6 and IE 7 also don’t understand what “CLEARTYPE” means.
What to do then?

Internet Explorers (IE6, IE7 and IE8) accept EOT file types so, i wrote this code:

<style type="text/css">
@font-face {
font-family: 'Custom Font';
src: url("myFont.eot"); /* FOR IEs */
src: local('Custom Font'), url('myFont.ttf') format('truetype'); /* for other web browsers */
}
</style>


This code works.. It was tested on IE6, IE7, IE8, FireFox 3.6, Safari 4.
Now you can use it with CSS in FONT, FONT-FAMILY like this:

<style>
.myStyle{
font-family: 'Custom Font';
font-size:14px;
}
</style>


To see a live demo for this CSS code, please visit: Custom Font

To covert TTF fonts to EOT fonts please visit: http://www.kirsle.net/wizards/ttf2eot.cgi

NOTE:
This feature only works on the following
IE 6, IE 7, IE 8, FireFox 3.6+, Safari 4+, Chrome 5+, Opera 10+

Don’t forget to check that your web host gives the ability to send TTF file types.

Good luck 🙂

Related posts:

15 Free Ebooks for Front-End Development and Design jQuery Gloss Plugin Tips for Better Website Performance Arabic web fonts are here