Home » Internet » Web Designing » How To Use Custom Fonts On Your Website With CSS

How To Use Custom Fonts On Your Website With CSS



Update

With Google fonts it’s even easier to use custom fonts on your website. Although if you want to use the fonts that are not available on Google fonts you still have to follow the method described below, but if you can find a font of your liking on the above-mentioned Google link, then it becomes much easier.

Browse through various font categories. Once you have found the font that you want to use on your website or blog, you will find a small button (hover your cursor over various buttons to find out which one) labeled “Quick use”.

On the subsequent page you may have to scroll a bit down to find out instructions that allow you to use that particular font. There will be two bits of code. The first one you will have to put in the header area of your website or blog. If you scroll down further, they also tell you how to use the same font as the CSS style.

The old blog post proceeds…

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:

@font-face {
	font-family: cool_font;
	src: url('cool_font.ttf');
}

After that you can use it just like a normal CSS declaration:

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.