Optimize font loading

[knctdev]

Problem

My navigation flickers on page reloads because of unwanted changes in fonts, a cascade of FOUT. 

Target

Font is loaded in the background and navigation is invisible until loaded, FOIT. Latest after the font is cached, this should be quick enough to provide a smooth user experience.

Context

• Using the Ride theme, with 
  • PT Sans Narrow as body font (theme settings)
  • System sans-serif as heading font (theme settings)
  • Custom CSS in theme settings to override --font-heading-family

:root {
  --font-heading-family: "Outfit", sans-serif;
}​

• Outfit is loaded from Google fonts (understand this could be optimized with the Shopify CDN but that's not the issue here), notably the font-display property is set to block

<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500&display=block" rel="stylesheet">

• In the Ride theme, nav links are in the body font, which I changed to my heading font using custom CSS  in the theme settings 

	.menu-drawer__menu-item.link,
	.header__menu-item.link {
	  font-family: var(--font-heading-family);
	  font-weight: 500;
	}​

Visualization

Using network throttling I was able to visualize the sequence, see video below.

https://cdn.shopify.com/videos/c/o/v/1768d20d22ce41dfa95f574d96d3e091.mp4

Questions

• How can I consistently implement a FOIT experience? I realize that the throttled, non-cache experience will always be worse but in an unthrottled environment I need to avoid flickering.
• Why does it seem that my custom CSS defined in the theme settings is loaded after the theme CSS? Is the only way to solve that to go make changes in the theme CSS directly?