Choosing the right typeface is a critical decision that influences a website's aesthetics, readability, and overall user experience. While web fonts are popular for their versatility and creative possibilities, they come with their fair share of disadvantages. In this post, we'll explore the drawbacks of using web fonts and showcase a new feature in Joomla 5 to make better use of system fonts.
The Disadvantages of Web Fonts
- Performance Issues: Web fonts need to be downloaded, they can significantly slow down a website's performance, especially on slower internet connections.
- Dependency on External Servers: Web fonts are typically hosted on external servers, making websites dependent on the availability and reliability of those servers.
- Browser Inconsistencies: A web font that appears crisp and clear on one browser might not render the same way on another, leading to a lack of uniformity in the visual presentation of a website.
- Privacy: Google could potentially use the font requests to track users across different websites. While Google has stated that they don't use the information collected for personalized tracking, the possibility remains, and in some European countries it is mistakenly believed that this makes their use illegal due to the GDPR.
- Layout Shifts: Web fonts take time to load which can cause the text layout to shift once the fonts are downloaded and applied. These shifts can be disruptive and are often a source of frustration for users, as the movement of elements on the page can cause confusion or lead to unintended actions.
Embracing the Benefits of System Fonts
System fonts are already installed on users' devices, eliminating the need for the site visitor to download anything before the site is displayed as designed. This results in:
- Improved Performance
- No Dependency on External Servers
- (Almost) No Browser Inconsistencies
- No Privacy Issues
- No Layout Shifts
System Fonts and the Modern Font Stack
The challenge with using system fonts is that they may have different names on different operating systems, which is why we use a font stack which is a prioritized list of font choices. This provides a fallback mechanism in case a user's system does not have the first-choice font installed.
Most people will only be familiar with the basic serif and sans-serif font stacks but there are so many more that using system fonts instead of web fonts will not stifle your creativity.
The Modern Font Stack is a typeface classification compiled of system font names for every modern operating system. This results in your web site having the fastest fonts available with no downloading, no layout shifts, and no privacy concerns.
New in Joomla 5 & the Cassiopeia Template
The full range of modern font stacks are now available to be used in Cassiopeia and you can select a different font stack for both body and heading styles.
You can test all the available Font Stacks at the Modern Fonts web site or on your own site.