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:
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.
I do not use this method – as i do not like leaving things to browser compatibility or possibility for front end manipulations.
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.