Page loading speed is one of the top priorities when creating modern websites. We constantly optimize images, minify code, and configure server caching. But another important element that often goes unnoticed is web fonts, which slows down the display of content.
Loading third-party fonts, such as Google Fonts, requires additional network requests. This results in delays: the user may see a blank screen or watch text “jump around” and change its appearance after the font file has finally loaded.
An effective and elegant solution to this problem is to use system fonts. And it is in this approach that the Modern Font Stacks project becomes an indispensable tool.
What are system fonts and how does it work?
Each operating system—Windows, macOS, iOS, Android, or Linux—has its own set of high-quality fonts that come pre-installed on the device.
In CSS, the font-family property allows you to specify not just one specific font, but a list separated by commas. This list is called a font stack. The browser reads this line from left to right and applies the first font it finds on the user's system.
For example, if you specify a stack for the modern interface, the browser will first check for the presence of the Apple font. If it is a Windows device, the browser will ignore this step and find the next available font created specifically for the Microsoft ecosystem. If it is an Android smartphone, the third option from the list will be connected. At the end of the stack, a base family (for example, sans-serif) is always specified to insure display in any case.
Why use system fonts?
- Instant loading System fonts don't need to be downloaded from the Internet. They are already in the memory of your computer or smartphone, so the text is displayed instantly, in zero milliseconds. This dramatically improves Core Web Vitals, which has a positive impact on SEO and visitor retention.
- Native interface The site looks organic on any device. To an iPhone user, the page seems to be part of the familiar Apple environment, and to a Windows user, the interface resembles native system windows. This subconsciously inspires more trust.
- Privacy and Security: Opting out of cloud font services means no third-party requests. Your site doesn't transmit visitors' IP addresses to Google servers, making it more secure and compliant with modern privacy standards.
- Resource saving There is no need to convert fonts to different formats, register their local connection on the server, or worry about usage licenses.
Why use stacks instead of a single font
A logical question may arise: if we refuse third-party services, why not just choose one good system font and use it for the entire site?
If we were to upload a font file to the server (for example, the popular Montserrat), it would be guaranteed to look exactly the same on all devices. But we pay for this identity in page load speed. When we choose the path of maximum performance and refuse to upload files, we are forced to work only with the baggage that is already installed on the visitor's device.
The main problem is that operating systems are created by different competing companies and they do not have common modern fonts:
Apple uses its proprietary San Francisco font and doesn't allow it on Windows. Microsoft has its clean and modern Segoe UI, which you'll never find on Apple devices. Google uses its own Roboto font for the Android ecosystem.
Let's say you specify only one font in your code: font-family: Segoe UI. On a Windows computer, your site will open perfectly. But as soon as a user visits the same page on an iPhone, their mobile browser won't find that font on their system. As a result, it will display the text in a basic, outdated font (such as Times New Roman), which will instantly ruin your carefully crafted design.
To prevent this, developers use a list of fonts in a clear order of priority, called a stack. It works like a step-by-step guide with fallback options for the browser:
- First, check if there is a font for Mac.
- If it's not there (meaning it's a different operating system), look for a font for Windows.
- If it doesn't exist, use the Android font.
- If nothing is found from the list at all, use any standard system font of the desired type (for example, without notches).
Thus, the use of stacks is a forced and at the same time ingenious necessity. In digital nature, there simply is no single modern font that would be installed by default on all operating systems at once. A stack allows you to flexibly adapt to the user's device, substituting the best of the available options and keeping the site fast and clean.
What is the merit of the Modern Font Stacks project?
It would seem that you could simply write a list of the most popular system fonts and use it on all your sites. But there is a serious problem here: different fonts have different physical sizes.
In typography, there are metrics like lowercase letter height, character width, and line spacing. If you just mix random system fonts into a list, your headline might take up two lines on a Windows screen, but stretch across three on a Mac screen. This will break the layout, indentation, and overall design composition.
The merit of the Modern Font Stacks resource lies in its in-depth analysis and professional selection. The author of the project has done a tremendous job:
- Visual grouping. Fonts are divided into 15 clear categories: classic with notches, modern geometric, monospaced, vintage, and more. You can easily choose the mood that matches your brand.
- Mathematical precision. The fonts in each individual stack are selected to have the most similar proportions possible. If you customize your design to one font from the list, it will look almost identical (without breaking the markup) with other fonts from the same set on other devices.
- Global reach. Stacks support not only popular Windows or macOS, but also various Linux distributions and older versions of operating systems, ensuring stability anywhere.
How to put this into practice
Implementing this approach is as simple as possible. You need to go to the project website, choose a visual style that suits your project, and copy the suggested line of code.
This code is then integrated into the global site styles via Custom CSS. For example, if you develop WordPress sites using professional tools such as Bricks Builder or Oxygen Builder, it is enough to disable third-party font loading in the performance settings and specify the copied stack for the site body and headers.
Using Modern Font Stacks is a conscious choice for performance and stability. It is a tool that allows you to create technically perfect, fast and user-friendly websites without any compromise on aesthetics.
