Web Fonts

Standard Web Fonts

There is a collection of fonts which are pre-installed on Windows & Mac computers, and they can be easily added to any website using CSS without any special imports. These standard fonts include Arial, Georgia, Tahoma & Verdana. Many websites still use Arial, especially in body copy, as it is clean and very legible.

Google Fonts

Its very easy to add a whole range of fonts from Google’s library. There are 100’s of open source fonts available that have been optimised for the web. The fonts are hosted on Google’s servers and can be implemented to any website via a snippet of import code added to the relevant stylesheet.

Adobe Typekit Fonts

Adobe cloud subscribers can use fonts from the Adobe Typekit.

Installed Fonts

Using installed fonts is the most complex of the four methods, as fonts usually need to be purchased/created in OTF/TTF format, and then converted into a number of file types, to cover the requirements of different browsers and operating systems.

OTF/TTF font files can be purchased from vendors such as My Fonts and then converted to woff, eot etc. using a 3rd party tool such as Font Squirrel or Online Font Converter.

Below is an overview of the different font files, and where they are/were required:

• OTF/TTF – Supported by all modern major browsers, apart from IE, where the font needs to be set to installable for it to work.
• WOFF – Supported by all modern major browsers.
• WOFF2 – A newer version of woff supported by all major browsers apart from Safari & IE11.
• EOT – Only required for internet explorer 8, 9, 10. IE11 can use WOFF.
• SVF – Only required for early IOS systems.

The general consensus from the web development community is that the only font file formats required for modern browsers are OTF/TTF & WOFF. This article by webflow by webflow does a great job of explaining this. If you want to check any combination for yourself caniuse.com is great resource.