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?
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: