Requirement: the font text does not display properly when the page is first loaded and needs to wait for a while to display.

Ponder: The text takes a while to display because the font file comes to the page without completing the request.

Solution: Preload the font file and then go to the page. (Can be preloaded via link tag)

Sample code:

<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
<link rel="preload" as="font" href="<%= require('./AvenirNextLTProBold.otf') %>" crossorigin>
<link rel="preload" as="font" href="<%= require('./HelveticaNowText.OTF') %>" crossorigin>
<link rel="preload" as="font" href="<%= require('./Lobster.otf') %>" crossorigin>
<link rel="preload" as="font" href="<%= require('./OPPOSans-B.ttf') %>" crossorigin>
<link rel="preload" as="font" href="<%= require('./OPPOSans-M.ttf') %>" crossorigin>
Copy the code

Note: Note that this can slow the page down, so use the Crossorigin attribute with caution to avoid the browser repeating requests for resources.