Briefly About Fonts That Are Optimal For Web

Anton Vosko

6 years ago

The Short Guide to Web Font Formats

Why do you need the web fonts at all, why not standard?
How to choose a good web font
In what formats the web font files should be
Why it’s not recommended to convert web fonts
Web fonts comparison table

Fonts play a huge role in the design of the website. The same text, written using different premium fonts, can produce the directly opposite impressions. Some of them look more convincing, others are more intriguing. Tons of articles, describing different aspects of working with web fonts, have already been written. But every day we continue to face an elementary misunderstanding of what they are.

This post will be of interest primarily to those who haven’t yet delved into the subtleties of the font technologies.

Why do you need the web fonts at all, why not standard?

The first thing that comes to mind, is that the standard fonts are horribly boring. And with their help, it’s difficult to do something original. As a rule, most of them bring sadness and depression not only to users but also to web designers. Non-standard ones, in this case, are more expressive and, in addition, there’s a lot more of them, so you have plenty to choose from. And a font is an integral part of the brand.

How to choose a good web font

The font is not just a digitized set of letters created by a brush on paper or in an illustrator. It’s also 90% of finishing, polishing, and testing on different media and in different sizes. Such a font looks good, its style is sharpened, with it, there will be no problems. Either on paper or on screen, it will look qualitative.

In what formats the web font files should be

The fonts prepared for implementation on the website must be in several formats at once:

TTF and OTF are the common formats, which are downloaded from the server while browsing the site.
WOFF is an unprotected source file for OTF or TTF and is perhaps the most important format that most popular browsers support. And the files in WOFF are usually two times lighter than the original ones.
EOT is an embedded OpenType archive with some security mechanisms. They are needed for support of older Internet Explorer browsers (starting with IE8).
SVG provides the support for the Apple Safari browser.

Why it’s not recommended to convert web fonts

You can’t just re-convert the file and keep the original quality. Especially if it was originally in the OpenType format. In the process, there’s a chance to lose some data embedded in the file (compiled instructions, additional characters, metrics, etc.). You’ll notice this when converted file unexpectedly “loses weight”. Especially when converting TrueType to PostScript and vice versa.

Web fonts comparison table

Format	Browser support
EOT	Internet Explorer 6+
WOFF	Internet Explorer 9+ Firefox 3.6+ Opera 11+ Chrome 6+ Safari 5.1+ Opera mobile 11+
TTF and OTF	Firefox 3.5+ Opera 10+ Chrome 4+ Safari 3.2+ Opera mobile 10+ iOS 4.2+ Android 2.2+
SVG	Internet Explorer 9+ Chrome 4+ Safari 3.2+ Opera mobile 10+ iOS all versions Android 3+