This method creates FOIT when using an Adobe Font

I have two web fonts I'm using for my website. Noe Display (weight 500, style normal) I bought from a vendor and I am loading it locally using @font-face, display: swap and preload. It renders extremely fast!

The second font is Freight Sans Compressed Pro (weight 500, style normal), this one I'm loading from Typekit (Adobe Fonts).

When using the code below from your recipe "The Compromise" I noticed that it's causing FOIT with the Adobe Font rendering. I know this was written for locally hosted fonts, but I was hoping it could be somewhat adapted for my use case.

(function() {
  'use` strict';
		
	// Optimization for Repeat Views
	if( sessionStorage.fontsLoadedCriticalFoftPreloadFallback ) {
		document.documentElement.className += ' fonts-loaded';
		return;
	} else if( 'fonts' in document ) {
		
	        Promise.all([
			document.fonts.load('normal 500 16px NoeDisplay'),
			document.fonts.load('normal 500 16px freight-sans-compressed-pro')
		]).then(function () {
			document.documentElement.className += ' fonts-loaded';
	
			// Optimization for Repeat Views
			sessionStorage.fontsLoadedCriticalFoftPreloadFallback = true;
		});
	} else {
		// use fallback
		var ref = document.getElementsByTagName( 'script' )[ 0 ];
		var script = document.createElement( 'script' );
		script.src = '/dist/js/critical-foft-preload-fallback-optional.min.js';
		script.async = true;
		ref.parentNode.insertBefore( script, ref );
	}
})();

I am using this code right now because of the FOIT issue, but I'm wondering if there's a better solution that includes 'sessionStorage'...it was the 'sessionStorage' that caused the FOIT.

(function() {
    'use strict';

		if (document.documentMode || /Edge/.test(navigator.userAgent) || /Edg/.test(navigator.userAgent)) {

			var freightSansCompressedPro = new FontFaceObserver('freight-sans-compressed-pro', {
				weight: 500
			});
					
			freightSansCompressedPro.load().then(function () {
				document.documentElement.className += ' fonts-loaded';
			});
		} else {
			Promise.all([
				document.fonts.load('normal 500 16px freight-sans-compressed-pro')
			]).then(function () {
				document.documentElement.className += ' fonts-loaded';
			});
		}
})();

I should also note that I'm using WordPress, and that I'm conditionally enqueuing the FontFaceObserver polyfill so it only loads in IE and EDGE.

I'm preconnecting to the Typekit stylesheet as well:
<link href="https://use.typekit.net/xxxxxx.css" rel="preconnect" crossorigin>

I couldn't find any articles where you specifically talk about Typekit, so here's hoping you have some guidance on how best to proceed.