Briefly About Fonts That Are Optimal For Web

The Short Guide to Web Font Formats

  1. Why do you need the web fonts at all, why not standard?
  2. How to choose a good web font
  3. In what formats the web font files should be
  4. Why it’s not recommended to convert web fonts
  5. 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

woff

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

fonts

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.

fonts

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+

That’s basically it. I hope this brief information was useful for the understanding of the basics of web fonts usage during the website development.


website themes

Read Also

Comic Sans And Other Fonts For Dyslexic Users

18 Special Font Style for Creative Typography: When Google Fonts Just Don’t Fit

20 Top Fonts for Old Vintage Signs

10 Top Font Apps For Typography Addicts or How to Get out of the Endless Fonts Maze

35 Best Examples of Chalk Hand Lettering Fonts 2017



Anton Vosko

Being a part of the TemplateMonster team is a great pleasure. I write about templates, marketing secrets, presentation tips, and different CMS. Hope my articles will be useful to you. If yes - please leave me a comment. Besides that, you can also meet me on Quora.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

Leave a Reply