Font icons show square characters while loading

  • Resolved kw11

    (@kw11)


    4 years, 10 months ago

    I am using the plugin on multiple sites and love it. It’s my favorite plugin. However, I’ve noticed that font icons like Font Awesome render as squares since the font is loaded after text is displayed.

    I don’t think this is desirable behavior of font icons for anyone. Can you program the plugin to hide icon characters until the font is loaded? The fonts I am using are Font Awesome and GP Premium from the GeneratePress theme.

    If you do not want to program such a feature, what’s the best way to hide rendering of specific fonts until the font is loaded without hurting page speed?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Albert Peschar

    (@kiboit)

    Hi @kw11,

    Thanks for your observation. We currently add font-display: swap to all @font-face CSS blocks in order to display text as soon as possible. But this is undesirable for Font Awesome and similar icon fonts.

    I’m going to look into changing this so that font-display: block (hiding the text until the font is loaded) is used for icon fonts.

    –Albert

    Plugin Author Albert Peschar

    (@kiboit)

    Hi @kw11,

    I’ve just released PhastPress 1.48. When you update to this version, this issue should be fixed. Please let me know if that is not the case.

    –Albert

    Thread Starter kw11

    (@kw11)

    Thank you. It mostly works. But it’s not working with font awesome on one site.

    It’s either because of this file:

    <link rel="stylesheet" id="myplugin-font-awesome-css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css?ver=5.3.2" type="text/css" media="all">

    Or this one:

    <style media="all" data-phast-original-src="https://domain.com/wp-content/plugins/wpdiscuz/assets/third-party/font-awesome-5.0.6/css/fontawesome-all.min.css?ver=5.3.5"></style>

    The first stylesheet I programmed into a plugin I created and it conflicts. Something I have to resolve, but icons still work.

    Is it because one of those files is being hosted on CloudFlare?

    • This reply was modified 4 years, 10 months ago by kw11.
    Plugin Author Albert Peschar

    (@kiboit)

    Hi @kw11,

    There is a whitelist of domains where CSS files are downloaded and processed by PhastPress in order to add the font-display: block or font-display: swap rule depending on the font name.

    I’ve just added cdnjs.cloudflare.com to that list and released PhastPress 1.49. When you update to that version, the change should also be effective for Font Awesome on this site.

    Let me know how it goes. ??

    –Albert

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Font icons show square characters while loading’ is closed to new replies.