Loading fonts before rendering in React app

Question

I am using a TTF font file in my React app. On a slow network, the page UI including text is rendered first(with default font), at that time the call for the TTF font is in progress, then after some time it's resolved, and the font updates in the UI. How to load font so that on the first rendering, UI will show the expected font.

This is how I load the font in typography.scss file

@font-face {
    font-family: "BodyVBoldXS";
    src: url(./fonts/Saira-SemiBold.ttf);
}

Path of typography.scss file : src/styles/typography.scss

Path of TTF file : styles/fonts/Saira-SemBold.ttf

Please Note: I can't load font from CDN, I have to include it with my code itself.

Answer 1

I was having a similar issue. My solution was to additionally load the fonts in my App.css file so they were rendered before the jsx for each components. Seems to have worked.