Using preload, our custom font is downloaded, but it is not used or rendered yet. Fonts will only be fully activated when they are actually used on the page (i.e. used by actual text or invisible text [like your hack]).

Your hack forces the browser to apply the font and render it on an invisible text, so next time when actual text appears, our font is loaded, cached and activated so it’s available to be applied instantly without any delay.

Extra point: We can use {font-display: swap} to reduce the delay to load the text with custom font but the hack works fine and I think is the best way to ensure the text is loaded with custom font without any delay.