Choosing the right font is crucial to the overall design of a website. After all, this strongly affects the look and readability. When designing your own website, it’s therefore important to start thinking about fonts at an early stage.
Creating the most accessible possible flow should be one of the main considerations during website development. The more readable the text, the better the experience for people with impaired vision or dyslexia, for example. Even for people without visual impairments, the fonts displayed can affect their reading experience in various ways. Especially when it comes to reading on a digital screen, a font that’s inviting and as easy to read as possible can make all the difference. One design rule of thumb is that strong contrasts and – for running text – a left-justified alignment increase legibility.
Web fonts add an individual touch
Some of the most popular fonts, such as Arial, Verdana and Times New Roman, come pre-installed on computers running Windows or Mac operating systems and in popular browsers. These pre-installed fonts are called web-safe fonts, and are also commonly referred to as system fonts or browser fonts. One exception is the Android operating system, which doesn’t support web-safe fonts.
Web-safe fonts have the advantage of being available on almost all devices and browsers and always looking exactly the same. However, because they are used on so many websites and for text documents, they lack individual appeal to some extent. Where originality is required – such as in marketing and branding – system fonts therefore tend to be unsuitable and are seldom used.
If you want to make your website more individual and recognizable, you should look for fonts created by designers. In the technical lingo, these are called web fonts. Many content management systems (CMS) include a number of pre-installed web fonts that are easy to use.
There are also many specialized font databases on the internet offering a wide selection of web fonts. These font libraries allow you to download individual web fonts – often free of charge – and integrate them into your own website. However, there are a few rules to follow: similar to images, there are fonts that have to be licensed and paid for and others that are royalty-free and may be used without charge. Depending on the database location, specific data protection regulations also apply when downloading web fonts.
Font licenses explained
Like images, fonts are generally protected by copyright. You can’t buy ownership of a font: when you obtain a font license – whether free of charge or on payment of a license fee – you simply get the right to use it, but do not own it.
There are a number of well-known font libraries on the internet that offer licensed and paid fonts. These include Adobe Fonts, Linotype and (to some extent) MyFonts. There are various payment models for these paid fonts.
With the pay as you go model, the website operator buys a certain number of page views with the initial payment. Once that quantity is used up, the operator must re-license and pay for additional page views. There is also the pay once payment model, which is based on the assumed average monthly traffic. As long as the number of page views remains under the set limit, there are no additional costs on top of the initial fee.
Both models are based on the technical principle that the fonts are embedded or hosted on the respective web server. With the pay as you go model, a tracker that counts the page views is inserted in the code. However, there is also the font licensing model, where fonts are provided via a subscribed web service rather than having to be hosted by the operator.
Free font databases often offer users royalty-free fonts to download. However, this does not mean that a license is not required to use them. And the most important thing to remember is that royalty-free does not automatically mean free of charge. Royalty-free fonts are only free of charge if this is specified in the respective license.
“Royalty-free” simply means that a font may be used freely or with only minor restrictions after the purchase of a one-time license, without the need for extended licenses. In contrast, the scope of use of licensed fonts is subject to precisely defined specifications. You’ll find more on licenses in this blog article.
Free font databases on the internet
We’ve listed here some well-known and popular font databases that contain all or some free fonts. Depending on the intended use, it’s also a good idea to check before downloading whether a font may only be used privately or also for commercial purposes. This information can usually be found in the respective license terms.
- Google Fonts
Google Fonts is one of the most popular libraries, with currently over 1,400 free fonts available for free use. Launched in 2010, the platform is constantly being updated and expanded with new fonts. - MyFonts
Founded in 1999, MyFonts contains more than 130,000 digital fonts, making it one of the world’s largest font databases. MyFonts offers its users both paid and free fonts. - Fontspace
Fontspace offers web designers a choice of over 92,000 free fonts, some of which are also licensed for commercial use. - DaFont
The DaFont font database has around 10,000 fonts available for free download, primarily for private use. - Font Squirrel
Font Squirrel is a well-known platform for free fonts that can also be used commercially. - Font Freak
More than 9,000 free fonts can be downloaded from Font Freak. In addition, the platform offers tens of thousands of paid fonts. - 1001Fonts
1001Fonts also boasts an extensive selection, with a library of more than 20,000 fonts. However, some of the fonts may only be used for private purposes. - Schriftarten-Fonts
German font library Schriftarten-Fonts contains around 13,000 free fonts. According to the platform, all fonts are suitable for use in MS Word. - Designer in Action
The Designer in Action platform offers designers not only fonts, but also Photoshop effects, plugins and other useful tools for free download. Although it has just 340 fonts, it’s still worth checking out.
Integrating web fonts into your website
Web fonts are usually stored on a web server and embedded into the website. When a page is visited, the fonts are then loaded by the respective browser. A somewhat more challenging approach is to directly integrate fonts into the website’s CSS (Cascading Style Sheets).
Web fonts that can be downloaded can come in different file formats; the TTF (TrueType) and OTF (OpenType) formats are most common. TTF and OTF web fonts are downloaded from font databases as compressed WOFF (Web Open Font Format) files as standard. Compression enables faster downloading; WOFF file metadata may also contain additional license information. WOFF files are supported by all common browsers and can be included in a website’s CSS.
Watch out:
After embedding a web font, the “flash of unstyled text” (FOUT) phenomenon may occur when the website loads. The website is then initially displayed with a web-safe system font rather than the desired web font. This can be due to a weak internet connection or slow web font delivery. As soon as the web font loads correctly, the website will also look how you want it to. FOUTs are harmless but unsightly and they may confuse site visitors. So it makes sense to define good fallback fonts that most closely resemble the final font. FOUTs are then visually less impactful and are also rated better by Google in terms of SEO. Read more in our recent blog article on Core Web Vitals.
Don’t fall foul of data protection regulations
Although loading and embedding free fonts via web services such as Google Fonts is easy and therefore tempting, website operators (including those in Switzerland) should be aware that this may be subject to the European General Data Protection Regulation (GDPR) and require the express consent of website visitors. As soon as a user visits a website with Google Fonts or fonts from another font platform, certain data is sent to the platform operator for analysis purposes.
In a ruling by Munich District Court on 20 January 2022 that caused shockwaves, it was held that dynamic integration of web services such as Google Fonts without the consent of visitors violates data protection. This verdict could become a precedent that Swiss website operators should also be aware of. After all, the Privacy and Electronic Communications Directive (also known as the ePrivacy Directive) has already existed since 2002, a good length of time before the introduction of the GDPR, and was expanded by the Cookies Directive in 2009.
If you still want to use your favorite font from providers such as Google Fonts, Adobe Fonts and MyFonts, you shouldn’t integrate it as a web service. Instead, download it and host it locally. It’s also advisable to show users a GDPR-compliant consent banner when they access your website.
Web fonts for my Hostpoint website
In common content management systems such as WordPress, Drupal and Joomla!, users can upload and integrate web fonts for their website in addition to the pre-installed fonts. It doesn’t matter whether these are free-to-use or site-specific. Depending on the situation, however, a certain level of technical knowledge may be required to integrate web fonts. For example, this process is not quite as easy as you might expect with the recently released WordPress 6.0 (read more in our blog post on WordPress 6.0). However, our Hostpoint support team is always available to help website operators with any questions they may have about integrating fonts.
