How to Overcome Font Rendering Issues in Browsers?

Fonts play a crucial role in how quickly a web page renders. Fonts of large headings especially look different than what we see in design tools like Adobe XD, Photoshop, Sketch and so on since they have anti-aliasing engines to smoothen the fonts. The fonts look blocky on the web and nothing close to what it looks like in design tools. I believe most developers would stand by that fact.

 

The usage of custom fonts has steadily increased over the years.

Why do people use custom fonts?

Companies usually use custom fonts to stand out. However, custom fonts come with a cost. Some of the issues that usually tag along with custom fonts are performance issues and slow loading time. So custom fonts may not be the most ideal approach for most websites. Fonts need to be loaded quickly for optimal user experience hence it's a priority.

Now, why do issues occur?

Let's take a look at some of the reasons why

The fonts that the design team use are usually print-friendly and not web-friendly.

Custom fonts are quite heavy.

How does it work under the hood?

First, the contents will be rendered using default font family of the browser or device.

The chosen font family will be applied over the contents. If there’s no delay between applying the font family over the contents the user won't see any transitions over font family.

But if there is a delay in receiving the font family, the user will face font family transitions. And this is not a recommended approach.

 

Usually, all custom fonts were called using @font-face. When the browser encounters the font family it will check whether the custom font is locally available. If it's available, it will render the font or else it will download the fonts from the server.

 

Although it's a quick process, it takes a considerable amount of time for the browser to paint the font strokes into the DOM. So, the usage of custom fonts will jeopardize the performance If the recommended guidelines are not followed.

How to optimize the custom font rendering?

It's optimal If the design team provides the font files in WOFF format.

 

Why WOFF?

Usually, the custom font files take up a large amount of space, the WOFF format is optimised for the web.

 

Reducing the font file count :

The used font-weight files alone will suffice. The number of used font weight and font style variants in a font family will be enough. Doing so, the load time can be optimised considerably. To overcome this only load the font weight and font style variant required in the design.

 

Even after following this process, we can optimise 20% of the load time but the font rendering issue will remain.

WHY WEB FONTS :

Pros :

1. Easily available in google fonts and free.
2. The browsers can easily render these fonts since their sizes are significantly smaller when compared to custom fonts.
3. It supports shared caching.

 

Cons :

1. Limited amount of font choices.

Most supported fonts for web & mobile development:

1. Open Sans
Current use case - PayTM

2. Montserrat
Current Use Case - Knowing Design

3. Playfair Display
Current Use Cases - Vogue, Spain, BMW

4. Roboto
Current Use Cases - Almost all google products (Gmail, Youtube)

5. Proxima Nova
Current Use Cases - Buzzfeed, Mashable, CNET

 

If we want the most optimal solution with minimal effort, the design team has to opt for web-compatible fonts rather than the print friendly fonts.