Custom Fonts and their use on Websites

9th November, 2012 in Technical 1 Comment

To show a specific font on a website it has to be installed on the computer. Every computer has a set of default fonts installed already (see the list here http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html). So using a font that is common across all computers means it will be displayed immediately and will not need to be installed. Its why Arial, Helvetica, Verdana, Georgia, etc. are common fonts to use.

Recently it is possible to add a custom font to the website and then install it dynamically when the page loads. So we could add any font you want IF you have the file and the license to use it. When a user visits the page the font is downloaded and the website changed. We can do this from IE7 onwards and all modern browsers.

The problem with this is fonts are usually licensed. Font factories make fonts for designers and sell them. Some allow them to be used on websites, some don't, some are low cost, some are expensive! I sometimes find it very difficult to even find the license or pricing on some font factory websites (and have to contact them). So if you find a font you like from any of these (e.g. http://www.adobe.com/uk/products/type.html), then it is likely you need to buy them and make sure the license allows web use.

So what has recenently emerged are font suppliers that are supplying web fonts specifically for use on websites AND free! The most common are Google Fonts http://www.google.com/webfonts and http://www.fontsquirrel.com/. Google Fonts allows us to reference the font stored on their server, so if someone already has visited another website that uses it, it wont be downloaded again and speed up website load times which is good. Font Squirrel we usually download from there and host it on your website.

So from a web design, developmen, legal and cost perspective, we recommend to choose a custom font from either Google Fonts http://www.google.com/webfonts or http://www.fontsquirrel.com/.

Comments
Picture of Jamie Blacker

Jamie Blacker 11th April, 2013 at 10:55 am

It should be noted that webfonts are a bit shaky with webkit. The recommended order for font-face is:

.eot, .eot?#iefix, .woff, .ttf, .svg

But you'll get a better result if you reorder that slightly so that .svg comes before .woff.

Fontspring have an article on it here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

Leave a Reply

Recent