Create a proper Critical FOFT with preload (polyfill) for Variable Fonts

The last time you wrote about Variable Fonts was just over two years ago and a lot has changed since then.

Is it possible to create a proper "Critical FOFT with preload (polyfill) for Variable Fonts" example, with Fallback fonts.

Thanks.

Here's an example of a Variable font setup with a fallback, you could merge with your script:

/* Load the variable font */
@font-face {
	font-family: 'Venn VF';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/814870/Venn_VF.woff2') format('woff2-variations'), /* for Safari */
			 url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/814870/Venn_VF.woff2') format('woff2'); /* for all other supporting browsers */
	font-display: fallback;
	font-weight: 300 800; /* prevents faux bolding in Safari */
	font-stretch: 75 125;
}

/* Load the static fonts as a fallback */
@font-face {
	font-family: 'Venn';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/814870/Venn_Regular.woff2') format('woff2');
	font-display: fallback; /* has nothing to do with the fact that this is the fallback font */
}

@font-face {
	font-family: 'Venn';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/814870/Venn_Bold.woff2') format('woff2');
	font-display: fallback; /* has nothing to do with the fact that this is the fallback font */
	font-weight: 700;
}