Fonts fa-brands and fa-solid used on site even though I’m not using them
-
January 17, 2023 at 2:48 am #9114[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.woff2This looks like it is roughly 150K of a 420K page download size.
https://www.webpagetest.org/result/230117_BiDcV8_PM/2/details/#waterfall_view_step1The 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?
January 17, 2023 at 8:36 pm #9119[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.cssI 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 KBSo 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.
January 17, 2023 at 8:37 pm #9120[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.
January 18, 2023 at 7:01 am #9124[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”]