06.2.2010

Apply a custom font to your website, Works on all Browsers

Bookmark and Share
Add to DZone

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

Comment from: web design india [Visitor] · http://www.vijayinfo.in
Thanks for u r information

its very useful
07/09/10 @ 08:28
Comment from: Mufaddal [Visitor] · http://www.mufaddalrocks.co.cc
Hello there,

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
08/05/10 @ 09:50
Comment from: Freelancer ID [Member] Email · http://www.freelancer-id.com
Well,
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
08/05/10 @ 15:38
Comment from: Artificial Eyelashes [Visitor] · http://falseeyelashes.unrestrictedminds.com/?p=4
hey i was searching for this in google, cheers mate
08/07/10 @ 20:56
Comment from: cool [Visitor] · http://www.12121212fff.com
wow never knew that
08/14/10 @ 00:04
Comment from: good guy [Visitor] · http://www.my1stsite.com
excellent website really like these things
08/19/10 @ 12:16

This post has 3 feedbacks awaiting moderation...

Leave a comment


Your email address will not be revealed on this site.

Your URL will be displayed.
(Line breaks become <br />)
(Name, email & website)
(Allow users to contact you through a message form (your email will not be revealed.)
Free Blog Themes / Templates