New to the community? Start here

font-display: swap; not working problem

As per my support conversation, I created this and added this in theme’s custom css. However, it says “unknown property” error: http://prntscr.com/pof8vp

I anyways added it to see if it made a difference, but I dont see it.

I tried some plugin, that did not work too.
Whats wrong here?

@font-face {
font-family: socialpug;
src: url(/wp-content/plugins/opt-in-hound/assets/fonts/socialpug.woff) format(‘woff’:wink:;
font-display: swap;
}

@font-face {
font-family: roboto;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format(‘woff2’:wink:;
font-display: swap;
}

@font-face {
font-family: opensans;
src: url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhp.woff2) format(‘woff2’:wink:;
font-display: swap;
}

@font-face {
font-family: opensans;
src: url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format(‘woff2’:wink:;
font-display: swap;
}

@font-face {
font-family: roboto;
src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format(‘woff2’:wink:;
font-display: swap;
}

@font-face {
font-family: fontawesome-webfont;
src: url(https://www.cryptopolitan.com/wp-content/themes/mts_crypto/fonts/fontawesome-webfont.woff2) format(‘woff2’:wink:;
font-display: swap;
}

Sat, 26 Oct 2019 13:05:45
  • Adam
    • Support Gorilla

    Hello Karnika Yashwant

    I hope you’re well today and thank you for your question!

    The “unknown property” warning – that’s something you can safely ignore. The CSS “editor” there does some sort of “validation” but it’s not really “understanding” all the modern/current standards – it’s more of “conservative” approach. I suppose that will change in future but you can still ignore that. The fact it’s reported doesn’t really mean it’s not added to the site :slight_smile:

    As for the issue itself, I’m afraid that usually it’s not that simple.

    I see there are two “kinds” of fonts there. I’m assuming that these are fonts that are already being used on site (not fonts that you don’t use yet but want to add to it). The first “kind” are Google web fonts and those should have the “font-display” specified already in their own CSS. Google suggests doing that by adding a

    &display=swap

    parameter to the “link” tag that includes these fonts. In WordPress, however, fonts are usually added to the site in a bit different way and it’s not recommended to directly use “link” tag in code so you can’t also add parameter directly if you want to “stay compliant’ with WP “rules”.

    There is, however, a nice plugin that does the trick for Google Fonts:

    https://wordpress.org/plugins/swap-google-font-display/

    As for the fonts that you’re loading directly from your own server, that should be changed either in font’s CSS files or in the theme (or child theme if you’re not using your own custom theme). That depends on the font itself and how it works (if it uses it’s dedicated CSS and where this CSS is loaded from).

    In many cases, though, as simple CSS as just this might work (for local fonts): 

    * {
font-display:swap;
}

    The specific CSS, however, would have to be crafted for the specific site/site configuration as well.

    Having said that, I’ve run your site through PageSpeed Insights and it doesn’t seem to report any issues related to “font-display” property so I believe you managed to solve that already, right?

    If you still need help with this, let me know and I’ll be happy to assist.

    Kind regards,
    Adam

  • Adam
    • Support Gorilla

    Hi Karnika Yashwant

    Yes, you’re right – there are two other fonts. I notice them but somehow missed in my earlier response. I’m sorry about that.

    One of them is loaded by an “opt-in-hound” plugin and the other one (Font Awesome) is coming from your current theme. The first one – you mentioned that you “replaced it in optin hound”, what exactly did you replace?

    The thing is that it doesn’t really matter if the font is actually used on site but rather if it’s loaded. And it still is on your site. If you look into the site source the font file is pre-fetched and if it’s defined in plugin’s CSS it will still be detected.

    If you did actually change plugins CSS and removed references to that font, then make sure also that

    – the font file is not added to in site’s header; I don’t know where that’s set on your site but I don’t think it happens “automatically” and rather than this is most likely configured in some option of the site or one of the plugins

    – make sure to clear all caches and regenerate CSS assets

    That last step is actually very important, especially with the optimization “structure” that you’re using on your site. It won’t help in anything if you change some CSS if the “old” version is still served by your asset optimizaiton plugin, Hummingbird CDN or from cache – or even cached by CloudFlare.

    You can also try adding slightly modified version of your original CSS to the site: 

    @font-face {
font-family: 'Social Pug';
font-display: swap;
}

    Note the font name – it’s not “socialpug” but “Social Pug”.

    As for FontAwesome. There’s been quite a long discussion about that on FontAwesome GitHub and it seems there are stills open tickets related to this. It does seem to be FontAwesome issue and to be honest, for quite some time already I didn’t come across any working solution for this.

    On a side-note though – that’s not something that will actually skyrocket your site performance right away once solved. It might improve the score slightly but I wouldn’t expect any noticeable performance changes for end user. It’s really “too small” thing to make that significant display (at least not with just one or two fonts).

    Kind regards,
    Adam

  • Karnika Yashwant
    • The Incredible Code Injector

    Ok, I removed that off everywhere and in plugin code, so now its fine. Thats gone.

    /wp-content/themes/mts_crypto/fonts/fontawesome-webfont.woff2
    So is this also the icons or actual font? I am not using this font as well, I could remove it forcefully.
    But does icons depend on this? Because all social icons in site footer and other icons disappeared. Even though I have not touched it. I just removed the socialpug, but icons disappeared now.

    I disabled assetoptimization as it made things worse, so its disabled and it can stay that way.

  • Adam
    • Support Gorilla

    Hello Karnika Yashwant

    /wp-content/themes/mts_crypto/fonts/fontawesome-webfont.woff2
    So is this also the icons or actual font? I am not using this font as well, I could remove it forcefully.

    This are icons as far as I’m concerned. If you are sure they are not used, nothing wrong should happen to the site. But it looks those are actually the icons that are “missing” on site. I didn’t notice that before but I see there are “empty rectangles” now where icons should be. Those are in fact Font Awesome icons. Usually that happens when there’s either a wrong declaration of FontAwesome in CSS or… some optimization tool gets in a way.

    Can you, at least around, identify when those icons disappeared? Some of them for sure are not related to Social Pug so they would be affected by some CSS/CSS Optimization

    Kind regards,
    Adam

  • Karnika Yashwant
    • The Incredible Code Injector

    I did a plugin conflict test and figured it was due to the “Asset Cleanup”

    @font-face {
    font-family: fontawesome-webfont;
    src: url(‘/wp-content/themes/mts_crypto/fonts/fontawesome-webfont.woff2’:wink: format(‘woff2’:wink:;
    font-display: swap;
    }
    * {
    font-display:swap;
    }

    I have this custom css written up (does it need both of those sections or second one can be removed?)

    So when that plugin is disabled, it works with this code, so this code isnt causing the issue.

    I tried to remove prefetch in assetcleanup, but result is the same.

    So the problem is not custom css or prefetch, but how css files are compressed may be.

    In assetcleanup, I can “exclude” a css file. Can you may be figure which file it is and so I can exclude that off?

  • Karnika Yashwant
    • The Incredible Code Injector

    So in https://www.cryptopolitan.com/wp-admin/admin.php?page=wpassetcleanup_settings&wpacu_selected_tab_area=wpacu-setting-optimize-css&wpacu_time=1572537880

    I found this file could be a potential problem /wp-content/themes/mts_crypto/css/font-awesome.min.css

    I dont see it in the list at all. So not sure what happened to this.

    I custom added it in following lists:

    CSS Files Minification
    Combine loaded CSS (Stylesheets) into fewer files
    Inline CSS Files

    Thinking may be this file is missed completely.

    Is there a way I can force pre-load this file or prefetch the file out of this plugin directly? Or using hummingbird?

  • Adam
    • Support Gorilla

    Hello Karnika Yashwant

    Thank you for sharing those findings with me.

    I’m not really sure though about that Asset Cleanup plugin.I can see that there are options to exclude given file from being minified, combined and inlined and I’d do that but if it doesn’t work and the file is actually not being detected – that might suggest that there’s something not quite right with how the file is actually included on site.

    In such case it might be worth to check the theme files as the theme loads that CSS file. According to standards the CSS asset should be enqueued on site but there are themes that sometimes instead to things such as directly including stylesheets either via regular HTML in header or via some custom PHP code using “include()” or “require()” functions or that CSS is included from other CSS using “@import” rule.

    Both these ways are incorrect in context of WordPress but they are used sometimes, unfortunately, and if that’s the case Hummingbird wouldn’t be able to optimize such assets (neither “exclude” them in any way from optimization) and, I’m guessing, Asset Cleanup might not be able to do this as well.

    So the way it’s loaded to the site would be the thing to check first, I believe.

    Kind regards,
    Adam