How to Use Custom Fonts in a Website

Posted In: Featured, Tutorials, Web Designing on May, 11 2011 | 2 Comments

Thanks to CSS3 you can use custom fonts or fancy fonts in your website. Normally a visitor can only see a font which is already installed in their computer. So if you want to use a custom font you will have to do a simple trick (more like a method actually).

Here is a list of 20 Beautiful Custom Fonts for Web Designers

How to use custom fonts in a website

Actually there are couple of ways to use custom fonts in a website. In this post I am going to talk about the CSS3 way! You can use the syntex @font-face to instruct the web browser to download the specific font to the visitors PC and that is how it will work. Here is a step by step guide to how to use a custom font in a website or a webpage.

1) Download a custom font (TTF or OTF) that may go well with your sites design. Here are some of the coolest fonts that you may use in your website.

2) Upload the font in your remote server. Make sure you copy the font file’s url.

3) Use this bit of code in your website’s CSS file. Make sure that you replace “your_custom_font_name” with the font name.

@font-face {
font-family: your_custom_font_name;
src: url('http://www.your_website.com/your_custom_font_name.ttf');
}

4) Now simply use a div tag or what ever you normally do to specify a font in your website.

p {
font-family: your_custom_font_name;
}

5) That’s it! You are good to go…. Not really! This method only works with Opera, Firefox and Safari. To make it compatible with IE you will have to do some extra work. This is because IE does not recognize .ttf ot .otf fonts. It recognizes .eot fonts. So to make sure your font works with IE to you will have to use 2 font files, one is .ttf/otf and other is .eot

6) Convert your .ttf font into .eot. You can read how to convert .ttf to .eot in this article.

7) Use the following code in your CSS file to make it work with IE.

@font-face {
font-family: your_custom_font_name;
src: url('your_custom_font_name.eot');
src: local(your_custom_font_name), url('your_custom_font_name.ttf') format('opentype');
}

8) Repeat point # 4 again to use the custom font in your website.

9) Done!

Please note, the value of src has been assigned 2 values. As IE does not recognize the ‘local’ keyword, it will ignore the second src value and pick the .eot font. But as Firefox and other browsers recognize ‘local’ keyword they will go with te second value of src and ignore the first one.

We really hope the Internet Explorer updates itself soon so that we dont have to go through with all these extra work just to use a custom font in a website.

Resources: Free TTF to EOT Converter

Did this post help you? Did you get it to work? Please feel free to share your views with us.