Web fonts: what they are, how to choose them, and how to optimize them
They are perhaps one of the most significant innovations in web design in recent years, and their introduction has revolutionized the way textual content is presented online, giving designers unprecedented flexibility. Today our focus turns on web fonts, an element that is only seemingly “small” but can instead have a major impact not only on loading time, but also on the usability and readability of content. So let’s delve into what web fonts are, how they differ from system fonts and desktop fonts, and why their proper implementation is crucial to a website’s success, including from an SEO perspective.
What are web fonts
Web fonts are typefaces that are loaded from a web server and used to display text on a web page.
They are therefore fonts outside the default fonts-the system fonts-that each site can choose to add from external libraries, such as Google Fonts, to vary the layout style.
Their main feature is that they are not preinstalled on users’ devices, but downloaded from the server only when the page loads. This means that designers have the ability to use a wide range of fonts, including non-ASCII and special characters, without having to rely on fonts that the user already has installed on their device.
Web fonts, definition and explanation
To guide us through this complex issue, we rely on Google’s Ilya Grigorik, who has produced a structured guide to web font optimization that appears clear and comprehensive. So let’s start with the definition: “A web font is a collection of glyphs, each of which represents a vector shape that describes a letter or symbol.”
From this we also derive very important side information: the fonts are different and have equally different weights, because the size of each particular font file is determined by “the complexity of the vector paths of eachglyph” and “the number of glyphs.”
Each font family consists of a number of stylistic variants (for normal writing, bold highlighting, or italic highlighting) and different thicknesses for each style; in turn, each style can contain glyphs of very different shapes, which, for example, involve different spacing, sizes, or shapes.
The Googler specifically cites the example of OpenSans, one of the most popular web fonts, which “contains 897 glyphs, which include Latin, Greek and Cyrillic characters.”
What web fonts look like: technical features
Web font technology has been made possible by standards such as @font-face, introduced with CSS3, which allows external fonts to be specified for use in rendering text. This has opened up new creative possibilities, allowing designers to choose fonts that better reflect the visual identity of the brand and enhance the user experience.
Web fonts are optimized for fast loading and use on different platforms and devices. They are often compressed into formats such as WOFF (Web Open Font Format) and WOFF2, which reduce file sizes and improve loading times. In addition, web fonts can include web-specific variants, such as subsets of fonts that contain only the necessary glyphs to further reduce file sizes.
More generally, the technical characteristics of web fonts are designed to optimize their performance and compatibility across a wide range of devices and browsers.
One of the main features is the file format: compression into WOFF (Web Open Font Format) and WOFF2 offers significant weight reduction compared to traditional formats such as TTF (TrueType Font) and OTF (OpenType Font), and thus significantly reduces file size, improving web page loading times.
Another important technical feature is the ability to use subsets of fonts. Subsets make it possible to include only the glyphs needed for the page content, further reducing file size and speeding up loading.
In addition, web fonts support asynchronous loading, which means they can be loaded in parallel with other elements on the page, reducing the overall loading time.
The CSS font-display property is another crucial technical element, as it determines how and when web fonts are displayed during loading. Settings such as font-display: swap ensure that text remains visible using a spare font until the web font is fully loaded, improving the user experience.
Finally, web fonts are designed to be highly compatible with different browsers and devices, ensuring consistent, high-quality visual rendering across all platforms. These technical features make web fonts a powerful and versatile choice for web designers, allowing them to create engaging user experiences without compromising site performance.
What are web fonts
Among the most commonly used web fonts available through services such as Google Fonts and Adobe Fonts we can mention:
- Roboto, one of the most popular fonts on Google Fonts. Designed by Christian Robertson, it is known for its readability and versatility. Roboto is often used in web and mobile applications because of its modern and clean design. It is available in several weight and style variations, making it suitable for a wide range of projects.
- Open Sans, designed by Steve Matteson, is another popular font. It features excellent readability on both small and large screens. Open Sans is often used for body text and headlines because of its clarity and neutrality. It is available in several weight variations, offering flexibility in design.
- Side, a sans-serif font designed by Łukasz Dziedzic. It is known for its balance between seriousness and warmth, making it suitable for both formal and informal content. Lato is widely used in corporate websites and blogs because of its readability and versatility.
- Proxima Nova, designed by Mark Simonson, is a very popular sans-serif font on Adobe Fonts. It is often described as a combination of Helvetica and Futura, offering a modern, clean design. Proxima Nova is used in a wide range of projects, from corporate websites to mobile applications.
- Source Sans Pro is Adobe’s first open source font, designed by Paul D. Hunt. It is a sans-serif font designed to be highly readable on digital screens. Source Sans Pro is often used for body text and user interfaces because of its clarity and readability.
- Merriweather, a serif font designed by Eben Sorkin. It is designed to be readable on digital screens, with a design that combines tradition and modernity. Merriweather is often used for titles and body text in websites that require a touch of elegance.
- Montserrat, designed by Julieta Ulanovsky, is a sans-serif font inspired by the old posters and signs of the Montserrat neighborhood of Buenos Aires. It is known for its geometric and modern design, and is often used for titles and body text in creative and fashion websites.
- Raleway, an elegant and lightweight sans-serif font designed by Matt McInerney. It is often used for titles and headings because of its sleek design. Raleway is available in several weight variations, offering flexibility in design.
- Playfair Display, a serif font designed by Claus Eggers Sørensen. It is inspired by 18th-century typefaces and offers an elegant and sophisticated design. Playfair Display is often used for headlines and body text in fashion and lifestyle websites.
The difference between web fonts and system fonts
The main difference between web fonts and system fonts lies in the way they are loaded and used.
System fonts are preinstalled on users’ devices and are used directly by the operating system. This means that the designer is limited to fonts that are commonly available on all devices, such as Arial, Times New Roman, and Verdana. These fonts are chosen for their readability and compatibility, but offer few options in terms of customization and branding.
System fonts are basic, have no impact on site page loading speed, and are compatible with a very wide range of browsers, operating systems, and software-in fact, they are also called web-safe fonts.
Web fonts, on the other hand, are more complex and, as mentioned, are downloaded from the server when the page loads.
This allows designers to use a wide range of fonts, including custom fonts, which may be specific to a particular project or brand. However, the use of web fonts also introduces some challenges, such as loading time and compatibility with different browsers and devices. This is where optimization techniques such as preloading, compression and caching come in, which can help mitigate these issues and ensure that web fonts load quickly and smoothly.
In addition, web fonts offer greater visual consistency: because they are downloaded from the server, text appears the same way on all devices and browsers, ensuring a consistent user experience. This is especially important for brands that want to maintain a strong visual identity across all platforms. However, it is essential to choose web fonts carefully and optimize them properly to avoid performance issues and ensure a good user experience.
Web fonts, desktop fonts and system fonts: let’s clarify
There is actually a third “set” of fonts to be aware of, namely desktop fonts-which, however, often overlap with system fonts.
From a more technical and specific standpoint, desktop fonts or installable fonts are called typefaces that can be manually installed on a computer for use in desktop publishing applications, graphics software, text editors, and other applications that require text to be displayed.
These fonts are not necessarily preinstalled on the operating system-they can be purchased, downloaded, and installed manually by the user. They offer a wide range of styles, weights and variations, often with advanced features such as ligatures, stylistic alternatives and extended glyphs. Desktop fonts are used primarily in design and production contexts, such as creating graphics, print layouts, and branding projects. They are chosen for their rendering quality and variety of stylistic options.
System fonts, on the other hand, are those typefaces that are preinstalled on device operating systems, such as Windows, macOS, Linux, iOS, and Android. These fonts are available for use in all applications running on that operating system, without the need for additional installation. They are chosen to ensure maximum compatibility and readability across a wide range of devices and applications. Fonts such as Arial, Times New Roman and Verdana are common examples of system fonts. These fonts are used in system applications, documents, e-mail, web browsers and any other application that requires text to be displayed. They are also often used as fallback fonts in CSS to ensure that text remains readable if web fonts are not loaded.
And so, the difference between system fonts and desktop fonts lies primarily in their availability and use: while system fonts are preinstalled and ready to use on an operating system, desktop fonts must be installed manually by the user. System fonts are chosen for their compatibility and readability on a wide range of devices and applications, while desktop fonts offer a greater variety of styles and advanced features, making them ideal for design and production projects.
How to choose web fonts for your site
Now that we know a little more about these fonts let’s try to understand how choosing web fonts for a website works, which is not a decision to be taken lightly.
Fonts not only affect the aesthetic appearance of the site, but they can also have a significant impact on readability, usability, and overall performance. A well-chosen font can improve the user experience, make content more accessible, and even positively influence search engine rankings.
Basically, to evaluate which web font to choose, we need to find the relevant information and also consider the supported character sets, which is crucial if we have a multilingual site. To “localize a page’s content into multiple languages, you’ll need to use a font that can ensure a consistent look and feel for users,” Google advises us, for example.
Here again we have a concrete example: the Noto font family from Google aims to support all the world’s languages, but the total size of the package, including all languages, “amounts to a ZIP file of more than 130 MB.”
Criteria for choosing web fonts
So there are key factors to consider when selecting web fonts for our site.
We inevitably start with readability. A font may be aesthetically pleasing, but if it is not easily readable, it risks compromising the user experience. Fonts such as Arial, Verdana, and Georgia are often preferred for their clarity and readability on screens of different sizes and resolutions. It is important to test fonts on various devices and browsers to ensure that the text remains readable under all conditions.
Another crucial criterion is consistency with the brand identity. Web fonts should reflect the tone and style of the brand, helping to create a consistent visual experience. For example, a bank website might opt for more traditional and formal fonts, while a fashion website might choose more modern and creative fonts. Visual consistency helps to reinforce the brand and create a more engaging user experience.
Compatibility is another important factor. Not all fonts are supported by all browsers and devices. It is essential to choose fonts that are widely supported and test the site on different platforms to ensure that the text displays correctly. In addition, it is advisable to have fallback fonts in case the main web font does not load properly.
Finally, performance is a crucial aspect. Web fonts can affect page load time, a critical factor for SEO and user experience. Heavy or poorly optimized fonts can slow down the site, causing user frustration and search engine penalties. Techniques such as preloading, compression, and caching can help improve the performance of web fonts, ensuring that they load quickly and smoothly.
The importance of web fonts and typography
If they can be so complex to manage, why choose to install custom web fonts? Google always answers us, “Web fonts are critical to achieving good design, user experience, and optimal performance,” and excuse me for saying so, it would come to mind.
These fonts are a central point for typography, or the graphic layout of the site and pages, which is a key aspect of design, branding, readability and accessibility: typography must fit the content of the site, must respect tone and voice, must be readable and functional, be able to adapt to the context and pay attention to the user.
And even what is seemingly just a detail can make a difference. “Web fonts allow you to achieve all that and more,” says Grigorik. With this system, “text is selectable, searchable, zoomable, and hight-DPI compatible, offering consistent and concise rendering, with multiple scalable resolutions that fit well with any monitor format, size, and resolution.”
Web Fonts and SEO: the impact on usability and accessibility
It should therefore be clear that the adoption of web fonts is not only about the aesthetics of the site, but has profound implications on SEO and usability. Put another way, even something as seemingly “minimal” as the choice and implementation of typefaces can actually affect search engine rankings and user experience, making a thorough understanding of how to manage them properly essential.
The biggest impact relates to page load time, which can be a crucial ranking factor : if not properly optimized, web fonts can add weight to the page and slow loading.
To mitigate this risk, it is crucial to adopt optimization techniques. Font preloading, for example, allows web fonts to load early, reducing the waiting time for the user. Compressing font files can significantly reduce file size, speeding up loading. In addition, the use of caching allows fonts to be stored in the user’s browser, avoiding the need to download them again on each visit.
Another aspect to consider is the use of the font-display parameter: setting font-display: swap can improve the user experience by keeping text visible while fonts are loading. This not only improves usability but can also reduce bounce rate, another factor that search engines consider for ranking.
Finally, it is important to choose web fonts that are readable and accessible. Hard-to-read fonts can increase dwell time on the page, but not in a good way. Users may take longer to read the content, but they may also abandon the site if they find the text too difficult to decipher. This can negatively affect rankings, as search engines interpret a high abandonment rate as a sign of poor content quality.
Also not to be overlooked are the effects this has on users, who are always the ultimate reference of our online activity: clear and readable fonts improve the user experience, making content easier to read and understand. This is especially true in terms of accessibility, to simplify navigation and the experience of users with visual impairments or reading difficulties: fonts such as Open Sans, Roboto and Lato are often preferred for their readability and clarity.
Also on this front, web fonts must be chosen to ensure that the text is readable for all users, regardless of their abilities. This includes considerations such as contrast between text and background, font size, and spacing between letters and lines. Good typographic design can make a big difference in the accessibility of content.
Another factor to consider is the use of fallback fonts. Although web fonts offer greater flexibility, it is important to have fallback font s in case the main web font does not load properly. This ensures that the text remains readable even if there are loading problems.
Finally, visual consistency is essential for good usability: using the same set of fonts throughout the site helps create a consistent and professional user experience. Sudden changes in fonts can distract and confuse users, reducing the effectiveness of the content.
How to optimize web fonts
Optimizing web font loading is essential to ensure a smooth user experience and improve site performance. Efficient font loading can reduce wait times, improve readability, and contribute positively to SEO.
Google’s guidance also reassures us on one point: “Contrary to popular belief, using web fonts does not necessarily delay page rendering or negatively impact other performance.” This means that it is possible to safely integrate web fonts on our site, properly optimized, and take advantage of their full potential.
Don’t be afraid to use web fonts, the experts tell us, but be careful to reduce the chances of error: “Unthoughtful application can cause avoidable delays and overly heavy downloads,” and therefore “the use of web fonts requires careful design to ensure that typography does not get in the way of performance.”
Basic interventions
Web font optimization begins with the choice of fonts themselves: it is important to select fonts that are already optimized for the web, such as those offered by services like Google Fonts or Adobe Fonts. These services provide fonts that are compressed and ready to be used on the web, reducing the overall weight of the page.
One of the most effective techniques for improving font loading is preloading, which allows fonts to be loaded in advance, before the browser begins to render the page. This can be done using the tag <link rel=”preload” href=”font URL” as=”font” type=”type/font” crossorigin=”anonymous”>. Preloading ensures that fonts are ready to be used as soon as the browser needs them, reducing the waiting time for the user.
Compressing font files is another crucial technique. Formats such as WOFF2 offer superior compression compared to traditional formats such as TTF or OTF, significantly reducing file sizes. Using fonts in WOFF2 format can greatly improve loading times.
Caching is another important strategy. Configuring the server to store fonts in the browser cache can avoid having to download them again on each visit. This not only reduces loading time, but also reduces bandwidth consumption. You can configure caching using HTTP headers such as Cache-Control and Expires.
Finally, it is important to reduce the number of font variants used, because each variant (weight, style, etc.) adds additional files to download, increasing the loading time. Limiting the number of variants used and loading only those that are strictly necessary can improve overall site performance.
Major troubleshooting
One of the most common problems with the use of web fonts is “flash of invisible text” (FOIT), where text remains invisible until the font is fully loaded. This can be frustrating for users and negatively affect the user experience, but fortunately techniques exist to ensure that text remains visible while fonts are loading.
The font-display parameter is a powerful tool to handle this problem. By setting font-display: swap, the browser uses a spare font until the web font is fully loaded. This ensures that the text is always visible, improving usability. Other options such as fallback and optional offer additional levels of control, allowing you to balance between loading speed and visual fidelity.
Another useful technique is the use of well-chosen reserve fonts. Specifying a list of fallback fonts in the CSS ensures that if the main web font does not load, the browser uses an alternate font that is as similar as possible. This can reduce the visual impact of switching between fonts and improve the user experience.
Finally, it is important to test font loading on different network conditions and devices. Using tools such as Google’s Lighthouse can help identify loading problems and suggest improvements. Monitoring site performance and making adjustments based on the data collected can ensure that web fonts are always optimized to provide the best possible experience.
Display fonts: significance and importance
We have mentioned it several times, and perhaps it is appropriate to explain well what font-display is.
The font-display parameter is a CSS property that determines how and when web fonts are displayed when the page loads. This parameter is critical for managing the user experience while fonts are loading, avoiding problems such as the aforementioned “flash of invisible text” (FOIT) or “flash of unstyled text” (FOUT). The latter occurs when the browser displays the text on the page initially using a default stock font, which may be visually very different from the intended web font, later replacing it with the actual web font and causing, however, a real flash due to the visible change in style, which can distract users and impair their experience.
The font-display value can be set to several options, each of which has a different impact on the user experience. The swap option, for example, is one of the most widely used. When font-display: swap is used, the browser displays a spare font until the web font is fully loaded. This ensures that the text remains visible at all times, improving usability and reducing user frustration.
Another option is fallback, which works similarly to swap, but with a shorter waiting period before displaying the fallback font. This can be useful in situations where loading speed is critical, but you still want to use the main web font whenever possible.
The optional option, on the other hand, is suitable for cases where loading speed is a priority over using the web font. With font-display: optional, the browser uses the backup font if the web font does not load quickly, improving overall site performance.
Finally, the block option keeps the text invisible until the web font is fully loaded. Although this option ensures that the text is displayed exactly as intended, it can cause usability problems if the loading time is too long, as users may see a blank or incomplete page for several seconds. This can lead to a frustrating experience and increase the abandonment rate of the site.
In summary, the choice of font-display value depends on the specific needs of the project and the balance between aesthetics and performance. Using this property correctly can significantly improve the user experience by ensuring that text remains visible while web fonts are loading and optimizing page load time.
Web fonts and rendering: how to reduce problems
The goal of technical SEO and, in particular, interventions in this area is to “help the browser” by improving “fonts and the way they are retrieved and used within our pages,” which is a critical step in the entire performance strategy. As we said, each font represents an additional resource and in some cases they can block the rendering of text, but when we operate in an optimized manner, setting a thoughtful strategy of loading and applying them on the page, it is possible to reduce the total size and improve rendering times.
The five web font optimization tips
Thus, Google’s guide points out five optimization actions on web fonts, a checklist of work:
- Check and monitor your font usage. The first tip is quite simple, as it calls for limiting the excessive use of fonts on your pages and reducing the number of variations used for each font. This allows you to offer users a faster and more uniform experience.
- Break fonts down into subsets. Let’s get technical: “many fonts can be subdivided into subsets or multiple unicode-ranges so that only the glyphs required by a specific page are used,” and best practices generally include the suggestion to create subsets based on the script (such as Latin, Cyrillic, and so on). This shrewdness alone can reduce file size and increase the download speed of the resource, but care must be taken in the course of the parameters for font reuse: for example, Grigorik explains, it would be best “for each page not to download a different, but overlapping set of fonts.”
- Optimize the font format for each browser. Each font should be provided in WOFF2, WOFF, EOT, and TTF formats, compressing with GZIP the EOT and TTF formats, which are basically uncompressed.
- Specifies optimal validation and caching policies. Fonts are static resources that are updated very infrequently: to ensure effective reuse between different pages, care must be taken to ensure that servers provide a long-lived max-age timestamp and revalidation token.
- Use FontLoading API to optimize the critical rendering path. The last tip is very important: default lazy loading may result in a delay in text rendering, which can be avoided with Font Loading API for specific fonts by specifying a custom rendering and timeout strategy based on different page content.
The critical rendering path problem
We know that page rendering can absolutely be a problematic factor for the site-and we also know that Google allocates a specific render budget to each site indexed or to be indexed-and fonts can complicate matters: the browser must decide how to manage the process to provide the user with text in the custom font even before the font appears on the page.
The so-called critical rendering path begins when the browser requests the HTML document and interprets the information given to build the page.It is important that already at this point the necessary fonts are available, because otherwise the machine will draw the layout and other content on the screen without inserting any text pixels, waiting for the external fonts to load.
Make sure that the text remains visible while the web fonts are loading.
As we said, we need to avoid the two frequent problems: that there is invisible text during loading, i.e., flash of invisible text, or that there is jolting during loading, i.e., flash of unstyled text, when we cannot immediately show the content to users and the browser temporarily resorts to a system font.
Another Googler, Katie Hempenius, offers us two ways to achieve the goal: a simple approach that is not universally supported by browsers and a more complex but valid intervention for all browers.
- Use font-display. The first method is the use of an API to specify the font-display strategy: the swap option tells the browser that text using this font should be displayed immediately using a system font. When the custom font is ready, the system font is replaced.
As we said, this is a simple approach but not universally supported by browsers: for example, Chrome and Firefox respond in the same way (hidden text for up to 3 seconds; if not yet ready, use a system font until the font is ready and swap), while Edge uses a system font until the font is ready and Safari hides text until the font is ready.
- Wait for custom fonts to load. The second strategy involves more technical work, broken down into three steps:
- Do not use a custom font when the home page loads, so the browser can immediately display the text using a system font.
- Detect when your custom font is loaded (with a couple of lines of JavaScript code, thanks to the FontFaceObserver library).
- Update the page style to use the custom font.
To implement these actions you need to refactor the CSS to not use a custom font when the initial page loads, and add a script to the page that detects when the custom font is loaded and then updates the page style. You can use Google’s Lighthouse tool to test whether the test remains visible when loading webfonts.
