[Resolved] Font awesome removal in GP 2.1

Home Forums Support [Resolved] Font awesome removal in GP 2.1

Home Forums Support Font awesome removal in GP 2.1

  • This topic has 11 replies, 2 voices, and was last updated 3 years ago by Tom.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #566237
    Enrico

    Hi Tom,
    I use font awesome and I am going to use the plugin you suggested: “Better Font Awesome”.

    It is better to disable first font awesome in GP 2.1 and then use “Better Font Awesome” or is better to just start using “Better Font Awesome”?

    After activating “Better Font Awesome”, to avoid garbage in the GP setting there is some cleaning in the setting or in the SQL that could be done?

    Thanks a lot
    Enrico

    GeneratePress 2.1
    GP Premium 1.6.2
    #566645
    Tom
    Lead Developer
    Lead Developer

    It’s important to disable Font Awesome in the theme (doesn’t matter if you do it first or second). It will just prevent GP from loading the files.

    There’s nothing database-wise you need to worry about.

    Also, a plugin isn’t necessarily necessary. You can add Font Awesome yourself with a function like this: https://docs.generatepress.com/article/font-awesome/#font-awesome-5

    #566764
    Enrico

    I am using only your code so I have font awesome 5.

    Thank a lot Tom!

    #566964
    Tom
    Lead Developer
    Lead Developer

    Perfect! You’re welcome ๐Ÿ™‚

    #567176
    Enrico

    There is something strange, this function:

    add_action( 'wp_head', 'tu_font_awesome_css' );
    function tu_font_awesome_css() {
        echo '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">';
    }

    creates four new requests to use.fontawesome.com and for what I see it adds more CSS and fonts then in the old GP version or in the new with the original font awesome setting.
    https://use.fontawesome.com/releases/v5.0.9/css/all.css
    https://use.fontawesome.com/releases/v5.0.9/webfonts/fa-solid-900.woff2
    https://use.fontawesome.com/releases/v5.0.9/webfonts/fa-brands-400.woff2
    https://use.fontawesome.com/releases/v5.0.9/webfonts/fa-regular-400.woff2

    Do you think it is possible to make it work only with the css for font awesome 5 without any request for Css or code to convert font awesome 4 to 5?

    If this is not possible it could be for other reason that this 4 request are not all necessary or not well optimized?

    I don’t think that font awesome 5 should be worst then font awesome 4.

    #567432
    Tom
    Lead Developer
    Lead Developer

    all.css is supposed to have all of those files combined. Perhaps you have a plugin adding the other files?

    #567667
    Enrico

    Hi Tom,
    all the files from use.fontawesome.com (total size 119kb) are loaded only if I use that function. I also disabled two plugin that could have something to do with CSS aggregation or font loading. I use font awesome in the menu, before post content and after post content.

    But the same site with GP setting for font awesome version 4 was loading only one file /wp-content/themes/generatepress/fonts/fontawesome-webfont.woff2

    In an other site that don’t use business font awesome icons (Facebook, Twitter, Linkedin), the file fa-brands-400.woff2 is not loaded. So it loads only the 3 files it need.

    It could be that the CDN is new and not well optimized.

    Or it could be that it must be used some more parameters in the function used to call the CDN.

    I don’t know, they are working it was only faster with only one request.

    #567904
    Tom
    Lead Developer
    Lead Developer

    Very weird. You can grab your own CDN URL on their website: https://fontawesome.com/get-started

    Perhaps that might fix it?

    Also, be sure to turn the GP Font Awesome library off if you have it turned on (Customize > General).

    #568039
    Enrico

    Thank a lot for the link.

    Yes, I have disable GP awesome setting. I have also upgraded the version 5.0.12 but it is all the same, it is only larger (4 request, total size 127kb)

    Their recommend way to use font awesome 5 it is “SVG with JavaScript” https://fontawesome.com/how-to-use/svg-with-js

    Apparently the way we used font awesome it is still the easy way but not anymore the best way with version 5.

    So I tried to simply use this different code inside your function:
    <script defer src="https://use.fontawesome.com/releases/v5.0.12/js/all.js" integrity="sha384-Voup2lBiiyZYkRto2XWqbzxHXwzcm4A5RfdfG6466bu5LqjwwrjXCMBQBLMWh7qR" crossorigin="anonymous"></script>

    It also work and it request only one file to use.fontawesome.com , but adds a lot of script, so the size increased by 84kb. In this way font awesome “cost” 84 kb + 127 kb = 211 kb
    Since in this way there are 2 less requests (it add an additional request to fonts.gstatic.com) the speed is similar.

    The best way should be to use “SVG with JavaScript” inside the site, not only in the function, but for the moment I don’t want to spend a lot of time dealing with “SVG with JavaScript”.

    So the question for the moment is: it is better 84kb less or 2 requests less? For the moment it is a bit faster the original function without “SVG with JavaScript”.

    #568283
    Tom
    Lead Developer
    Lead Developer

    I would say less size is more important than fewer requests, especially if you have HTTP/2 enabled on your server.

    You can always build your own icon font using a tool like IcoMoon – that way you can choose the icons you need and ditch the rest.

    #568298
    Enrico

    Thanks a lot for the suggestions!

    #568304
    Tom
    Lead Developer
    Lead Developer
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.