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:
Times/Times New Roman
Available for desktop:
Comic Sans MS
.EOT: Internet Explorer
.TTF/OTF: Safari and Opera
.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.
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