The usage of custom fonts has steadily increased over the years.
The fonts that the design team use are usually print-friendly and not web-friendly.
Custom fonts are quite heavy.
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.
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.
1. Easily available in google fonts and free.
Cons :
1. Limited amount of font choices.
2. Montserrat
3. Playfair Display
4. Roboto
5. Proxima Nova
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.