Preloading google fonts. Getting console warning despite crossorigin attribute usage

Question

I am trying to preload a google font stylesheet like so:

<link href="https://fonts.googleapis.com/css?family=Raleway:regular,italic,500,500italic,600,600italic,700,700italic" rel="preload" as="style" crossorigin>

Later in the head I'm linking the sheet like so:

<link rel="stylesheet" id="generate-fonts-css" href="//fonts.googleapis.com/css?family=Raleway:regular,italic,500,500italic,600,600italic,700,700italic" media="all">

I get the below console warning... but I thought this was the correct crossorigin usage for fonts?

A preload for 'https://fonts.googleapis.com/css?family=Raleway:regular,italic,500,500italic,600,600italic,700,700italic' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

Answer 1

Consider using a crossorigin attribute in your head statement. You have used a 'crossorigin' in preload and its not used while loading the actual font. This makes the preload statement an irrelevant one.

link rel="stylesheet" id="generate-fonts-css" crossorigin href="//fonts.googleapis.com/css?family=Raleway:regular,italic,500,500italic,600,600italic,700,700italic" media="all"