What exactly is a web font, and what does converting to one involve?

Question

I've read a few articles on this but the actual technical differences between web fonts and desktop fonts still elude me. The more I read on the topic the more I get the feeling that no-one has a clear technical definition of what exactly a webfont is.

When I upload a "desktop" font to a webfont-generating service like FontSquirrel, what exactly do those services do to the font file to make it a web font? If the primary use of these services is the conversion to different formats, what formats are actually needed on the modern web to support a reasonable number of browsers as of 2019?

Answer 1

A "web font" is just a font used on the web or on the browser. What these web font generators do is just make your life easier by giving you the necessary css for serving the font to your visitors and converting your font to all file formats you need to make sure the font works cross-browser.

Some fonts are considered "web-safe" simply by being so common that every computer has them, like "Arial". You don't need to do anything but tell the website to use that font. Web fonts need to be downloaded by the visitor's browser because if a font is not on your computer, you aren't going to see it.

Font formats developed specifically for the web, like Woff are designed with small filesize in mind. Google fonts serve you different formats this way too, it's just a little hidden.

It's pretty important to note that some fonts may have a separate web font license, which you may not have even if you own the font files. Just like google images... Just because you were able to download the image, doesn't mean you can use it to sell your company's aftershave.

Developers.google.com has a good post that focuses on web font optimization but has something about the basics too.

There's a pretty good excerpt about the different formats in that article:

Today there are four font container formats in use on the web: EOT, TTF, WOFF, and WOFF2. Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers: EOT is IE only, TTF has partial IE support, WOFF enjoys the widest support but is not available in some older browsers, and WOFF 2.0 support is a work in progress for many browsers.

So, where does that leave us? There isn't a single format that works in all browsers, which means that we need to deliver multiple formats to provide a consistent experience

Transfonter also has a pretty good table about browser support:

Answer 2

I did some more detailed research after asking this question, and so am adding this answer as a sort of addendum to Joonas', which was good but didn't answer my last question in enough detail for me:

If the primary use of these services is the conversion to different formats, what formats are actually needed on the modern web to support a reasonable number of browsers as of 2019?

Many developers argue that WOFF and WOFF2 are the only font formats needed in modern web development. Those answers aren't well-sourced however, and I also think they're being slightly overzealous, so let's start by looking at the actual support figures for WOFF and WOFF2, courtesy of CanIUse.com, which is the industry standard for documenting this sort of thing.

Support for WOFF2

WOFF2 improves on WOFF in every way, is supported by most desktop browsers released after 2014, but has only since 2018 began to be supported by most mobile browsers. It's supported by an estimated 93% of browsers globally.

Support for WOFF

WOFF began to be supported by Internet Explorer in IE9 (released in 2011), which renders the EOT format obsolete for versions of IE released since 2011. It's supported by an estimated 97% of browsers globally.

Other desktop browsers began to support WOFF at roughly the same time, including Firefox since Firefox 3.6, Chrome since Chrome 5, and Safari since 5.1 (released in 2010, 2011 and 2011 respectively), rendering the TTF and OTF¹ formats obsolete in prior versions. Most mobile browsers have supported WOFF since 2013.

Caveat and Conclusions

From this standpoint, it's easy enough to write off all other formats as being unnecessary, but software no longer officially being supported has never been a good indicator that it's no longer being used. To put it another way, global browser version share is not guaranteed at all to be representative of the demographics that your website will be used by.

Browser version share can vary dramatically among demographics: factors like country, social class, and income all heavily influence what devices (and therefore, versions of browsers) your users are using. As a developer, think about whether the site you're building will be used by demographics that are more likely to be using those older versions.

If you decide that that's the case, and you need to support desktop browsers older than 2011, or mobile browsers older than 2013, use the full font stack: WOFF2, WOFF, TTF (or OTF), and EOT.

If you don't need to support those ancient browsers, and it's still true that you more than likely don't, simply use WOFF2 and WOFF as your font stack from hereon.

---

_{(1) TTF and OTF are traditional desktop font formats, and any browser that supports one supports the other, so never use both}

Answer 3

Not much.

WOFF is nothing else but a compressed format for TTF, resulting in smaller size. The internals don't change. WOFF2 goes a little bit further, it does modify the font representation slightly to eke out a bit more compression. EOT, being a MS-only format, doesn't count at all. SVG is practically contours only, hardly more, so it doesn't count as a real font, only use it for icons, if at all.

Just use WOFF and be done with it. If you want to squeeze out the last byte, you might want to offer WOFF2 as well but the difference will be negligible.

Answer 4

I'd like to emphasise something really basic, though: a "webfont", technical implementation details aside, is a font you've been licensed, by its creator or a rights holder for the specific task of using on a website. And those will come in a webfont format. If you're sitting in front of a generator to convert a font to a webfont format and it's not open-source or one you drew yourself, stop right there! You're almost certainly breaking the license and could get sued. And since it's on the web, it's easy for people to find what you're doing and check against their list of sales.

See e.g. this doofus, who has done work for Facebook and Google, who didn't realize until someone told him that he was technically using a pirated font on his website. He had a desktop subscription license, but that isn't a license for web use.