Knowpapa.com - a developer's blog

2 min. Website makeover with @font-face

Not until a few years back – choosing a web-safe font was a major decision for a developers.   To ensure comaptibility between the browser and the operating systems, a developer would have to stick to the basic set of fonts like  Arial, Courier, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet and Verdana. And then he had to ensure that page rendered with with the primary and fall back  font-family.

This obviusly posed a design limitation.  CSS2 has addressed some of the design limitations by including font synthesis and the ability to render remote fonts on the go using the @font-face method. You don’t need to download the font to use it.

How to use any remote font to give a complete website makeover

Start by selecting the web font you want to use. All you need is the url of the remote font you want to use.
Google Webfonts is the largest (and perhaps the safest) collection of importable webfonts. With google, you can also be sure of no server breakdowns.

Instead, refer to the “Use” section of the font for a window that looks like:

Google allows three ways of getting it to work.

1) The Standard way: Gives you and additional  line of CSS like:

<link href='http://fonts.googleapis.com/css?family=Trocchi' rel='stylesheet' type='text/css'>

Simply add this to the the header section of your website and viola – you have the latest font powering your website.

I however do not use this method – becuase this creates an extra http request – thus slowing down the performance.

 2. The import way ( my preffered way)

Switch to the import tab and grab a code that would look something like:

 @import url(http://fonts.googleapis.com/css?family=Average);

Add this code to the beginning of your main css style file.  Notice that end of the url – the name of the font-family I use here as an example is  “Average”.

Now within the CSS file – locate all font-family CSS attributes.

the entires would look like:

font-family: Verdana , Arial, 'sans serif';

Now simply append the name of the new font before all other fall-back fonts. Your edited CSS would look someting like:

font-family: 'Average', Verdana, Arial, 'sans serif';

repeat this for every instance of font-family attribute. (Hint: Use Find -replace for a one-click change).

That’s it – you are done with a complete makeover of your website font.

3. The Javascript method

I do not use this method – as i do not like leaving things to browser compatibility or possibility for front end manipulations.

However, if this is desired – simply grab the Javascript code from google and place it in your header to make it work.

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Trocchi::latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>

 

Final thoughts

Use of more than one font style per website is not advised. It not only slow down the page loading time – but is also an aesthetic blunder if not done well. So select only one (or as few fonts) that you can do with.