Apply a custom font to your website, Works on all Browsers
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.
Follow up:
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 :)
6 comments
its very useful
I am using this method for custom fonts -
@font-face {
font-family: "MyCustomFont";
src: url('http://idealcomps.0adz.com/Graphics/fonts/Sloop-ScriptOne.ttf') format("truetype");
}
.para {
font-family: "MyCustomFont", Verdana, Tahoma;
font-size:24px;
}
But it is not working on Mozilla 3.5 and 3.6 version.
what can I do for it.
I understand it is not work on ie but why it is not working on mozilla version ?
Regards
Mufaddal
Try this code out,
@font-face {
font-family: "MyCustomFont";
src: local('MyCustomFont'), url('http://idealcomps.0adz.com/Graphics/fonts/Sloop-ScriptOne.ttf') format("truetype");
}
I added local('MyCustomFont'), in the SRC
This post has 3 feedbacks awaiting moderation...





