With CSS (Cascading Style Sheets) you can use custom fonts on your website. Normally your visitors can only see the fonts that are already installed on their computers. So if you use a font that is not installed on your website visitor’s computer then his or her browser will show some other font that is there on the computer. That’s why when you are defining a font for an element (such as <p>) you often specify multiple fonts so that if your preferred font is not available your CSS file should use the available alternatives.
Conventional way of using custom fonts for headings and logos etc. is creating the text in a graphic editor and then using the image file. From the perspective of SEO this is not appropriate; you must use text as much as possible.
Now there is a way around in CSS that lets you use custom fonts, downloadable fonts on your website. You can download the font of your preference, let’s say cool_font.ttf, and upload it to your remote server where your blog or website is hosted.
Then from within your CSS file (or wherever you are defining your styles) you have to refer to that custom font in the following manner:
1 2 3 4 | @font-face { font-family: cool_font; src: url('cool_font.ttf'); } |
After that you can use it just like a normal CSS declaration:
1 2 3 | p.custom_font{ font-family: cool_font; /* no .ttf */ } |
This way you can use as many custom fonts as you feel like on your website.
As you can notice in the comments section, this method of using custom fonts on your website doesn’t work with Internet Explorer (but of course!). Please refer to this link in order to know how you can make it work in IE too.
{ 10 comments… read them below or add one }
Thanks Usefull
How To Use Custom Fonts On Website With CSS and withOut install font
thank you! fonts on my website is just what i need. thumbz up!
THANK YOU VERY MUCH FOR A WONDERFUL TUTORIAL……IT’s REALY AWESOME.
Please mention tag or code for custom fonts
Thank you so much!
I don’t understand why every other answer to using custom fonts that I find either says it’s impossible or makes it super difficult. I’ve designed so many sites around the crappy pre-installed fonts and it’s this simple?! Cheers!
Things are as easy and difficult as we make them out. I think some people make things appear difficult just to sound important.
thank u so much
this coding is working well
but this codes are not working in internet explorer why this problem
Prabakar, it does not work in IE because IE does not support TTF / OTF. Please refer to my blog post on how to make it work with IE. http://symphony-of-dot-net.blogspot.com/2010/03/making-css-custom-font-works-with-ie.html
Hello Ccchai (?). I’ll put a reference to this link in the post. Thanks.