Until recently, web developers were limited to the use of common fonts. But with @font-face now it is possible to retain the unique / custom fonts, one would like to show in his website, of course only if they have the legal right to post those fonts on the web.

What is @font face

Generally, we’ve been limited to using fonts pre-installed on visitor's computer. Increasing support of CSS3 '@font-face' allows us to reflect fonts installed on remote servers on to the web pages. Simply by referring to same in your styles.

Style sheet syntax for the same is provided below

Utility of @font face

In the above example, we have used an true type font called 'Bebas Neue'  to reflect on our web pages.
 
In the above example, you must have noticed that we have 2 '@font-face' tags with 1 refering to '.eot' font format and the other refering to '.otf' font format.  Reason being, CSS browsers like chrome and firefox supports / recognises open type (otf) and true type (ttf) font types, but IE browsers support / recongnise only an embeddable open type fonts (eot).

I used an online free font convertor to convert true type font (ttf) to an embeddable open type font (eot).

Saved this converted '.eot' file and regular Bebas Neue '.ttf' font in a folder along with stylesheet and the web page onto which I wanted custom font to reflect.

The '@font face' style syntax given above can go into style sheet or as a style tag in the head region of web page.

Syntax explanation

The first line of the syntax, I have assigned custom font name to 'font-family' predifined variable - ‘MyCustomBebas’. This custom name can be anything you like. But it should be noted that you should refer to this custom name in your style class, like the one shown below

where in the IE browser would recognise eot file and thus the font shows up in IE and Google chrome and Mozilla browsers recognise ttf / otf file.

Interestingly, the above utility can also be used to show different fonts in different browsers. Here is an example to show how to do it.

Challenges faced:

The same 'Bebas Neue' font when I downloaded from different source with extension '.otf' -  BebasNeue.otf didn’t work in Google chrome and Mozilla Firefox. The syntax I used for it is given below:

Here too, had saved the otf and converted eot file in the same folder. While the font showed absolutely fine in IE browsers, but didn’t show in Mozilla Firefox and Google chrome browsers. The reason I guessed for it not showing in above mentioned browsers was probably because otf font file must have been corrupt.

Live example of css custom fonts can be seen in our imajine website menulinks / titles. Here we have used 'Helvetica Light Condensed Black'.

Tags: Embed External font in web pages, add / show custom fonts in web pages, how to show different fonts in websites, chrome font-face otf, @font-face tut