How to Preserve Readability of Text When Font Fallback Occurs with JavaScript ?

Last Updated : 06 Jun, 2023

In this article, we will discuss how to preserve the readability of text when font fallback occurs with JavaScript. When designing websites or applications, we often use custom fonts to make our text stand out and match the style of our design. However, not all users may have these custom fonts installed on their devices, which can cause font fallback to occur. This means that the user’s device will use a default font instead of the custom font we intended, which can result in a less readable and less visually appealing design.

Font fallback occurs when the web browser is not able to render a specific font, and alternatively, it uses a default font that is available on the user’s computer. This can lead to readability issues if the fallback font is significantly different from the intended font. Below there are some related terms

Font fallback: Font fallback occurs when a browser is unable to display a font that is specified in the CSS for a webpage or application. In this case, the browser will fall back to using a default font that is installed on the user’s device.
Web fonts: Web fonts are fonts that are downloaded from a server and used on a webpage or application. Web fonts allow us to use custom fonts that may not be available on the user’s device.
Google Fonts: Google Fonts is a web font service that provides a collection of free and open-source fonts that can be used on web pages.
Typekit: Typekit is a web font service that provides a collection of high-quality fonts that can be used on web pages for a fee.
JavaScript: JavaScript is a programming language that is used to add interactivity and functionality to web pages. In the context of font fallback, we can use JavaScript to detect font fallback and provide a fallback font that is more readable and matches the style of our design.

Tips for preserving the readability of text when font fallback occurs:

Use web-safe fonts: Web-safe fonts are those that can be found on the majority of computers and electronic devices. You can make sure that the fallback font is the same style and size as the intended font by using web-safe fonts. Web-safe fonts include, for instance, Arial, Helvetica, Times New Roman, and Verdana.
Load fonts from a font hosting service: To make sure that the desired font is loaded on the user’s computer, you can use font hosting services like Google Fonts or Adobe Fonts. These services offer a large selection of fonts that are suitable for the web, and JavaScript makes it simple to add them to your website.
Use font-stretch property: Make use of the font-stretch property to change the fallback font’s width to match the intended font’s width. The font width can be changed using this property, which can be set using JavaScript, without affecting the font’s size or weight.
Set font stacks with CSS: You can use CSS to set font stacks, which define a list of fonts in ascending order of importance. This enables you to provide a list of backup fonts in case the primary font is not available, as well as a fallback font that is stylistically similar to the intended font.

Approach 1: Provide fallback font stacks: In this approach, we will preserve the readability of text when font fallback occurs is to provide fallback font stacks. This involves specifying multiple font families in the font-family property, with the custom font specified first and fallback fonts specified after it. By doing so, if the custom font is not available, the browser will automatically fall back to the next available font in the stack, ensuring that the text remains readable.

Example:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Font Fallback Example</title> 
    <style> 
        #my-para { 
            font-size: 16px; 
            line-height: 1.5; 
        } 
    </style> 
</head> 
  
<body> 
    <p id="my-para"> 
        This is some text that should 
        use the Open Sans font. 
    </p> 
    <script> 
        var el = document.getElementById('my-para'); 
        el.style.fontFamily = 'Open Sans, Arial, sans-serif'; 
    </script> 
</body> 
</html>

Output:

Approach 2: Detect font fallback and provide the fallback font: In this approach, we will measure the dimensions of the text using the custom font and compare it to the dimensions of the text using a fallback font. If the dimensions do not match, font fallback has occurred, and we can provide a fallback font to ensure that the text remains readable.

Example:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Font Fallback Example</title> 
    <style> 
        #my-para { 
            font-size: 16px; 
            line-height: 1.5; 
        } 
    </style> 
</head> 
  
<body> 
    <p id="my-para"> 
        This is some text that  
        should use the Open Sans font. 
    </p> 
    <script src="script.js"></script> 
</body> 
</html>

Javascript

var el = document.getElementById('my-para'); 
var testFont = 'Open Sans'; 
var fallbackFont1 = 'Arial'; 
var fallbackFont2 = 'Helvetica Neue'; 
  
// Create a test element with the Open Sans font 
var testEl = document.createElement('span'); 
testEl.style.fontFamily = testFont; 
testEl.innerText = 'Test Text'; 
el.appendChild(testEl); 
  
// Check if the test element's font is the 
// same as the Open Sans font 
if (testEl.style.fontFamily !== testFont) { 
  
    // The test element's font is not the  
    // same as the Open Sans font, so use  
    // the first fallback font 
    el.style.fontFamily = fallbackFont1  
        + ', ' + fallbackFont2 + ', sans-serif'; 
}