So you have designed and built the website polishing down every single curve and corner for it to look as fabulous as it was originally intended. Then upload it to the server and … surprise! It just doesn’t look like on your local machine. After performing a thorough investigation on your endless CSS files you realise, that in fact all that has changed is… FONT. Sounds familiar?
Yes! The specifically for web design tailored font, that you have spent hours picking from the longer list than that of your ’all I want for Christmas is...’ has been replaced by the good old ’Arial’ or ’Times New Roma’.
How did it happen? The custom font you have installed was not carried over to the server together with the rest of the files. Once browser tries to load your site and finds unknown font which is not installed on that particular computer you are trying to test your site on, it replaces it with the default one, already mentioned above.
However, just as every problem in web design and development, this one has a pretty neat solution too. It is called:
@font-face
This CSS technique allows you to load custom fonts directly from the server while rendering the page, hence displaying the website just as it was meant to.
Let’s start with the font formats. As there are multiple browsers currently widely used in the market it is inevitable there are various font formats used by them too. Just like Firefox and Internet Explorer using different syntax to render div opacity, browsers are using different default font types too.
There’s a list covering most of the current browsers:
• Internet Explorer (all versions): EOT
• Safari (3.2+): TTF / OTF
• iPhone (3.1) SVG
• Chrome (all versions): SVG (TTF/OTF added 25th Jan 2010)
• Firefox (3.5+): TTF/OTF (.WOFF added 3.6)
• Opera (10+) TTF/OTF
Looking down the list it becomes obvious that only two formats, in particular EOT (Embedded OpenType) and TTF (True Type Font) are required to cover most of the browsers. Of course for the sake of perfection, adding SVG (Scalable Vector Graphics) will keep you asleep at night. Though the latter one is very important if you are developing for the iPhone or iPad.
So how and where can we get all these types of fonts required to fulfil the need of cross-browser compatibility? To stir you the right way you can start with the following sites:
http://webfonts.fonts.com/en-US
To make a good example lets pick ‘Gill Sans MT’ font from fontzone.net. If you have one of the newer Microsoft Office packages installed on your machine, most likely this font is already in your collection. However if that’s not the case, it will not look pretty.
So once the font is picked and downloaded (usually in TTF format) you will have to convert it to EOT (and SVG). To do so head to this fabulous web tool:
Note that in the downloaded folder you will find 5 different file formats. Should you wish you can add all of them, however EOT and TTF is more than sufficient to do the job right.
So let’s copy the font files in the directory called ‘FONTS’ in the root folder of your site and place the following code in your page’s CSS file:
One thing to remember is that the font-family name you have assigned while loading @font-face is to be used throughout entire CSS file. Also, please use your imagination and do not give the same font-family name as it is originally stored on your machine, such as ‘Gill Sans MT’ as in our sample.
Of course you can use the code from the very same downloaded archive which looks like this:
Though frankly this code did not work for me on some of the older firefox versions. Well it’s all down to testing afterall, so don’t forget to check it in as many browsers as possible.
So get coding and as usual, should you need any further information feel more than welcome to use the comments section below or contact us directly at blog@kartogram.co.uk
Regards,
SD
///////////////////////////////////////UPDATED 4th February 2015/////////////////////////////////////
So far the best ’bulletproof’ version of @font-face that seems to cover the majority of browsers is this: