There are now two kinds of fonts available for use. The first kind are the ones universal fonts installed on every system, desktop and mobile. The other are custom fonts that are generated and uploaded along with the site. The difference in the fonts is that universally available fonts are available immediately and don’t have to be downloaded. The trade off is that although universally available they are not perfect copies of each other despite the name. Custom fonts on the other hand are exactly the same on every system but the trade off is that every browser has a different format they want so you’ll need to offer up to 4 different formats to allow the widest range of viewers to see them. This can result in up to 200k or more of files that will be downloaded along with the page when viewed. This can also cause a lag in when they see the site and when the font changes. It is usually a good idea to avoid using to many fonts as they can cause a dramatic increase in download time for a webpage.

Below you will find resources and information on the best way to use these fonts and which to services provide the best bang for your bytes.

This first group are the core fonts found on most devices. These are the safest to use in most site designs.

Universally available fonts, for desktop and mobile:

Arial/Helvetica
Courier/Courier New
Georgia
Times/Times New Roman
Trebuchet MS
Verdana

Available for desktop:

Impact
Arial Black
Comic Sans MS

The custom fonts fall into two broad groups. @font-face fonts and javascript rendered fonts. The @font-face fonts require a file for each browser:
.EOT: Internet Explorer
.TTF/OTF: Safari and Opera
.WOFF: Firefox
.SVG: Mobile Safari

This can make supporting multiple browsers costly in terms of weight, kilobytes, of a web page. One of the benefits of @font-face fonts is that they are easily rendered and can be used on large amounts of text.

Javascript rendered fonts tend to be about the same size as all the various font formats of @font-face fonts combined so you won’t save much, if anything, in weight. But they render in every browser. The downside is that they can hit the processor pretty hard so large amounts of text can take a long time to render or even crash the browser in some cases. Javascript rendered fonts are best used for titles or other limited uses.

 

The best way to use custom fonts is to optimize the number of characters in the font set. If you know you are just using it for titles then you can limit it to uppercase, lowercase and numbers which will allow for a very small files. In most cases you will upload a font to one of the font sites that will create the various file formats needed.

Another way to lighten the webpage is to remove some of the formats. If you are making a website for just android and mobiel safari you can stick to .svg and .ttf.

In order to get the widest range of fonts you will need to use a font service site.

@font-face service sites

https://developers.google.com/webfonts/
https://typekit.com/
http://www.fontsquirrel.com/

javascript rendered service sites

http://cufon.shoqolate.com/generate/