Preload custom fonts in React

Problem: When a custom font is not rendered at the beginning by the init state, if a state is updated and we need to render this font, it won’t be properly rendered as expected. It is rendered in other default font family.

Solution:

1. Link types: preload — HTML: HyperText Markup Language
2. Web Font Loader

Web Font Loader

useEffect(() => {
  WebFont.load({
    custom: {
      families: FONTS_FAMILY_NAMES,
      urls: ['../assets/fonts/stylesheet.css'],
    },
  });
}, []);