Can / Should You Use &display=swap parameter when preloading local web fonts?

673 views Asked by At

As most of us know. Google now requires fonts to be preloading in a certain way as part of it's performance metrics. Now this is ok for fonts served from Google but personally I'm having trouble finding a good resource for local loading.

For example font-awesome is always a pain and I get the typical message

was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

Now my question is, should I be using the &display=swap parameter when loading locally and if so do I just add it after .woff OR is it not required? Personally I feel like it is because the console window keeps complaining which logically makes me think google will. Thanks in advance for your time.

Below is an example of my code for loading a couple of fonts + fontawesome locally

<link rel="preload" as="font" href="<?php echo get_stylesheet_directory_uri(); ?>/fonts/AVANTM.woff" crossOrigin="anonymous">
<link rel="preload" as="font" href="<?php echo get_stylesheet_directory_uri(); ?>/fonts/LucidaGrandeBold.woff" crossOrigin="anonymous">

<link rel="preload" type="text/css" as="style" href="<?php echo get_stylesheet_directory_uri(); ?>/css/fontawesome-all.min.css">    
<link rel="preload" as="font" type="font/woff2" href="<?php echo get_stylesheet_directory_uri(); ?>/fonts/fontawesome-webfont.woff2?v=4.7.0" crossOrigin="anonymous">   

<link rel="stylesheet" type="text/css" as="style" href="<?php echo get_stylesheet_directory_uri(); ?>/css/fontawesome-all.min.css">

<style>
    @font-face{font-family:"AvantGarde Medium";font-style:normal;font-display:swap;src:url(<?php echo get_stylesheet_directory_uri(); ?>/fonts/AVANTM.woff)format('woff');}
    @font-face{font-family:"Lucida Grande";font-style:normal;font-display:swap;src:url(<?php echo get_stylesheet_directory_uri(); ?>/fonts/LucidaGrandeBold.woff)format('woff');}
    @font-face {font-family: 'FontAwesome-swap';font-display: swap;src: local('FontAwesome'), url(<?php echo get_stylesheet_directory_uri(); ?>/fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2');}
</style>
0

There are 0 answers