Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Fonts fa-brands and fa-solid used on site even though I’m not using them

  • #9114
    Avatar photo[anonymous]

    On the theme fonts page I set the body font and heading font to be Rubik.
    I also set the menu font and logo font to use the font used for the body.

    Looking at a waterfall of the site loading, I see it is also loading these two fonts
    https://flatulentcupid.com/assets/webfonts/fa-brands-400.woff2
    https://flatulentcupid.com/assets/webfonts/fa-solid-900.woff2

    This looks like it is roughly 150K of a 420K page download size.
    https://www.webpagetest.org/result/230117_BiDcV8_PM/2/details/#waterfall_view_step1

    The theme is Editorial-2  v1.2.0.0

    I’m not sure how to tell if the font is being used on the page and if it is required or not.

    Is there a way to remove this font from the site?

    #9119
    Avatar photo[anonymous]

    I got some understanding of what’s going on so I was then able to search and find this post:
    https://forum.getpublii.com/topic/unnecessary-css-file-load-with-editorial-2-theme/

    in this file
    assets/css/fontawesome-all.min.css

    I removed this code to not load the fonts - it was the last thing in this file
    @font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:auto;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}
    
    the first page test showed a size of 420K
    now the test shows a size of 274K

    https://www.webpagetest.org/result/230117_AiDc19_F8E/

    So that’s a good improvement.

    the fontawesome-all.min.css file is
    Bytes In (downloaded): 11.9 KB
    Uncompressed Size: 54.7 KB

    So it’s only 11.9K in actual download – but I’m going to try to understand it better at some point.

    If as the other post here says, it’s only being used for social media icons and such, then I ought to be able to make it much smaller.

    #9120
    Avatar photo[anonymous]

    Also: I tried first deleting that font loading code by making a copy of the file in the override section with the loading code deleted, but that didn’t seem to work.

    So I deleted it from the actual file, which worked.

    #9124
    Avatar photo[anonymous]

    Now I see that in exchanging for saving all those bytes, I removed the hamburger menu.

    And now I can’t figure out how to get it back.

    I must be missing something.

    I deleted everything off the server, copied a fresh copy of the Editorial 2 theme into the site’s directory.

    It’s still showing that hollow square.

    .jpg”]
    .jpg”]