How To Use Custom Fonts On Your Website With CSS

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 ) 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.