Preload and Fonts

Couldn’t see anything on this and was not sure where it should go, hence posting here.

I would normally do something like this to quickly load a subset font before loading the full fonts later.

In the head:


<link rel="preload" href="/assets/fonts/myfont-subset.woff2" as="font" type="font/woff2" crossorigin/>
<style>
@font-face {    
  font-family: 'myfont';    
  src: url(/assets/fonts/myfont-subset.woff2) format("woff2"),     
  url(/assets/fonts/myfont-subset.woff) format("woff");    
  font-weight: 300;    
  font-display: swap;
}
</style>

When served from Netlify you can see the CDN for the fonts in the CSS, but not on the ‘link preload’ Does preload actually work or am I missing something?


<link rel="preload" href="/assets/fonts/myfont-subset.woff2" as="font" type="font/woff2" crossorigin/>
<style>
@font-face {    
  font-family: 'myfont';    
  src: url("https://d33wubrfki0l68.cloudfront.net/f0755cab1e08e3d758265757e5191595c7a85926/bac8d/assets/fonts/myfont-subset.woff2") format("woff2"),     
  url("https://d33wubrfki0l68.cloudfront.net/afa235179956eb63e0f0ab05bc8d77061ebd2b32/cb722/assets/fonts/myfont-subset.woff") format("woff");    
  font-weight: 300;    
  font-display: swap;
}
</style>

The cloudfront URL’s are the result of asset optimization, as configured on your site’s deploy settings page most of the way down:

image

Things that get optimized (which don’t include the <link> tag at present) will get rewritten to cloudfront URL’s. HOWEVER all content we serve is served from a CDN - that’s just the CDN we use for optimized assets. All traffic from netlify comes from some part of some CDN :slight_smile:

If you want things to be consistent, turn off that feature in our UI. But hopefully things work normally, even if they look a little weird in the source code?

Thanks Chris, it does seem to work, I was just a bit confused.

We don’t process the CSS, JS and Images as they are already compressed, but we do like the Pretty URL’s - hence settings.

So all good, consider me a bit less confused…

Glad to hear that @AudioBear! If you have any other questions, feel free to ask.