Adobe Typekit - Pagespeed Insights - Ensure text remains visible during webfont load

Question

I have tried everything to get font-display to work for my Adobe Typekit font. I am still getting the error "Ensure text remains visible during webfont load" in google pagespeed insights. I can't find any forums for this specific issue.

The pagespeed insights error shows this link as the culprit:

https://use.typekit.net/af/b718ff/00000000000000007735f98d/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3

I have made sure to select font-display: swap within my project in Adobe as seen here at this link:

https://use.typekit.net/wqe8olp.css

Within my functions.php file I am adding the font like this:

function add_typekit_fonts()
{
  echo '<link rel="preconnect" href="https://use.typekit.net" crossorigin>' . "\n";
  echo '<link rel="preload" as="style" href="https://use.typekit.net/wqe8olp.css">' . "\n";
  wp_enqueue_style('typekit-fonts', 'https://use.typekit.net/wqe8olp.css', array(), null, 'print');
  echo '<noscript><link rel="stylesheet" href="https://use.typekit.net/wqe8olp.css"></noscript>' . "\n";
}

add_action('wp_head', 'add_typekit_fonts');

And lastly, adding it to my CSS

@font-face {
  font-family: 'sofia-pro';
  src: local('sofia-pro'), url(https://use.typekit.net/wqe8olp.css?family=sofia-pro&display=swap);
  font-display: swap;
}

Still getting the same error.

I am not sure what else I could possibly do. I know with google fonts there is a URL attribute to add it within the link itself, but have had no luck finding any information on this for Typekit fonts. What am I missing?