Fonts play crucial role on and off the web. They are equally important for readability and appearance of websites and documents. We can easily install and use fonts on our Computers. On the other hand, Cascading Style Sheets (CSS) are applied to declare fonts for different elements like headings, paragraphs, lists, divisions etc. in websites.

Using CSS3 Web Font on Website

For Web Newbies:

Web pages, by default, display in serif font (“Times New Roman” or “Times” in general), in case, when no font is declared in the related CSS or if declared, it is not available on the requesting Computer (client side). Web designers also declare an alternative font, that is to be displayed when the main font is not available. Consider below given CSS code:

p {
    font-family: Arial, Verdana, Tahoma;
}

When the above piece of CSS code is used for a Web document, the Web browser will render Arial font for the Paragraph <p> element. If the browser finds Arial font unavailable on the clients Computer, it will show the <p> element in Verdana family of fonts. Again, if it discovers Verdana not available on the Computer, it will display <p> in Tahoma. Else it will render the corresponding element in the default Serif family.

Is there a way to avoid this dependency on commonly available fonts?

Yes, it can be done very easily, by using Web Fonts, through a simple, two line of CSS3 code! CSS3 provides us with a property that can access the font file from a server to use it on our website. See the following CSS3 code:

@font-face {
    font-family: 'your font';
    src: url('full url of your font');
}

By putting the above code in our CSS, we call the web font in our Web document. Replace full url of your font with the URL of the font your uploaded on your server and your font with the name of that font. You can find a free font on Web Fonts for that purpose. Now, we are ready to assign this font to any desired element on our website:

p {
    font-family: 'your_font';
}

Simply, we are accessing the font-file from our server. So, the Web browser will not look into the client’s computer again for fonts.

CSS3 Web Fonts Demo

I’ve used “Megapolis Extra” font to demonstrate CSS3 Web Fonts to you, see it below:

This paragraph element is using a Web Font “Megapolis Extra”. It is accomplished by using @font-face property of CSS3.

I hope you find this article useful. Let me know your thoughts in comments. Also see how to use Google Web Fonts on Website.