Different fonts are preinstalled on different operating systems (such as Windows or Mac OS). The lowest common denominator of these fonts across all platforms is known as web-safe fonts or “websafe fonts”. So these are fonts from which one can assume that they are available almost everywhere and are represented in the same way. For example, if you stated Arial, you could be sure that 99% of the bones also had Arial. That was especially important 10 years ago when there weren’t any web fonts.
- Using the Safe Web Fonts and Beyond: Safety
With the advent of web fonts, it was then possible to display fonts that were not preinstalled on the operating system. Why do you still need web-safe system fonts today if there are web fonts anyway? You should always use it as a fallback in the CSS font sack if web fonts do not work or if you deliberately do without them. Using the fancy text is the best option here.
It’s getting easier to use custom fonts instead of system fonts, but the topic is still evolving. We’ll go over the different font formats for the web, and discuss tips and best practices. For those who want to improve their level and hone their skills as much as possible with advanced concepts, we will analyze in detail deeper possibilities. At the end of the article, you should not only be prepared, but also be able to get the most out of your web fonts.
- Font formats License
When you purchase a font license, you receive a package of font files, which usually includes at least the following formats:
If your target audience uses modern browsers, you can take the progressive at font-face method, which only works with WOFF and WOFF2 formats. The formats give better compression and allow you to work with fewer files in your code. If the user’s machine is old and doesn’t support any of them, it might be better to provide them as a system font to improve performance. Using the fancy text you need to have the perfect solution.
If you want to maximize support, add the EOT and TTF files. Also, SVG fonts are usually used to extend browser support, but on the Grilli Type site we no longer use SVG fonts as they have drawbacks. Google Chrome, for example, has removed support for them entirely.
- Web-safe fonts no longer exist
The table also makes it clear that web-safe fonts no longer exist if you mean that they have to be installed on all platforms. What largely worked for the desktop back then, no longer works in the age of mobile browsing because of iOS and, above all, Android. Some of these have a different set of pre-installed fonts or Android does not have any of the common web-safe fonts at all. That must be considered in any case, after all, Android has a share of over 28% of all operating systems, including desktop, across Europe. Android is thus the outlier, but for the remaining three quarters one can still speak of web-safe fonts.