General
From a (web) technical point of view, fonts are divided into two classes:
- a manageable number of standard fonts that are supported by web browsers as standard.
- an almost infinite variety of fonts that are loaded together with other resources (images, CSS and Javascript files, etc.) when a page is called up.
Against this background, the choice of font can have a strong influence on loading times and thus also on search engine rankings.
What are "web-safe fonts"?
"Web Safe Fonts" are available by default on almost every system. In contrast to non-web safe fonts (e.g. from Google) they do not have to be specially loaded from a server.
Their use has several advantages:
- the Pagespeed of the page increases
- the "visual stability" is maintained (no shifting effects during loading time)
- accesses that are questionable from a data protection point of view (e.g. access to third-party servers) are avoided
Against the background of Google's Core Web Vitals, which make load times and stable display ("cumulative layout shift") during page load important ranking factors, the choice of font plays an important role in technical search engine optimisation.
Arial: This is a text, 0 1 2 3 4 5 6 7 8 9
Verdana: This is a text, 0 1 2 3 4 5 6 7 8 9
Times New Roman: This is a text, 0 1 2 3 4 5 6 7 8 9
Garamond This is a text, 0 1 2 3 4 5 6 7 8 9
Use of non-secure fonts
If you are not satisfied with the selection of web-safe fonts, you can also embed external fonts on your website. For example, Google Fonts are very popular. These are then reloaded by the visitor's browser when the page is called up, which is accompanied by a time delay when the page is first called up (afterwards, the font is usually kept locally on the visitor's computer, so-called "caching").
If you decide to integrate an external font, you should take the following measures for better pagespeed:
- Use fonts in the file format WOFF2. This is currently the format with the highest file compression and thus also the lowest loading time.
- Declare the font in the HTML head ("inline") and not in a separate CSS file. This is the quickest way for the browser to know which font is needed (the HTML page is loaded first).
- Always define an alternative (web-safe) font and set font-display with optional. This tells the browser to use the alternative font if the external font cannot be loaded after 100ms.
Ex.:
<head>
<style>
@font-face {
font-family: 'Open Sans', Sans-Serif;
src: url("./fonts/OpenSans-Regular-webfont.woff2") format("woff2");
font-display: optional;
}
body {
font-family: 'Open Sans', Sans-Serif;
}
</style>
</head>
IMPORTANT:
If you decide to use an external font, be sure to make the font available on your web server. Otherwise, the browser will establish a connection to a third-party server in order to load the font from there. This means that visitors leave their IP address with the provider, which would usually require consent under the GDPR.
The effects of the font on the loading time of a page
In order to be able to measure the effects of the selected font on the pagespeed and the core web vitals, we placed two static pages on the same web space and called them up with Google's pagespeed tool. Both pages are identical except for the font used.
The result is the following:
The left side on the above picture shows the evaluation of the page with the external font Raleway from Google.The image on the right shows the results of the same page using the web-safe font Verdana. As can be seen, the second variant achieves better results in all areas and, with an overall score of 93 points, comes out of the analysis 9 points better than the version with Raleway (84 points).
The bottom line shows the structure of the page on a timeline. Here it becomes clear that the content also appears later. This is measured, among other things, with the key figure "First Contentful Paint"(FCP) and is due to the fact that the font must first be loaded and processed by the server.
A simple network analysis provides more precise figures:
So 4(!!) resources have to be loaded, which together have a size of approx. 85 KB. The time required for this is approx. 350 milliseconds.
Awesomefont and alternatives
Awesomefont is a popular font for displaying icons:
The font is very popular. Its primary aim is to provide a uniform world of symbols and avoid the creation and use of graphics. The only problem is: Like every font, Awesomefont must first be loaded by the browser. The evaluation of this is sobering:
Here, too, 4 resources are required. The loading time in this case is 1.1 seconds.
It is possible to optimise the loading times for Awesomefonts (e.g. via SVG sprites). However, this again involves work and maintenance. We therefore recommend that you carefully consider whether you really need the font.
A much better alternative might be to use HTML Entities. These are symbols that belong to the standard HTML character set and are therefore already available on the visitor's device.
As a TYPO3 editor, you usually have no influence on the choice of font. This is defined as a global value in a CSS file and cannot be changed in the RichTextEditor in the TYPO3 backend. For this, commission a qualified TYPO3 service provider.
Conclusion
The font plays a very important role in the design and recognition value of an organisation or a brand. Since the selection of secure web fonts is relatively small, it may make sense to integrate an external font. However, this is associated with an increase in loading times, which leads to a worsened user experience, especially for visitors with mobile devices. Against the background of the relevance of pagespeed for Google's ranking, website operators should carefully consider whether a web-safe font is a justifiable solution for their organisation.