Not Planned Reducing font awesome footprint

[dethfire]

Maybe xenbase can implement this?

Reduce FontAwesome icon font file size

The default XenForo 2.1 theme includes the FontAwesome Pro icon collection. The icons are downloaded with the page as three separate .woff or .woff2 font files which include all 7,800+ FontAwesome icons, even though the XenForo theme uses only...

xenforo.com

 

[dethfire]

I see now that there are license issues so xenbase can do this stock, but @Russ, do you have a list of the additional icons used in xenbase, not listed in this resource, that we can plug into fontforge?

 

[dethfire]

What's the icon for my right sidebar heading?

 

[McAtze]

The best way to reduce the FontAwesome fonts or files is to change the template font_awesome_setup, so you only request the required font and not all fonts. Your addon is nice, but if you reduce the included fonts there are always issues with third party addons and/or themes.

Look for the template font_awesome_setup..

<xf:set var="$faVersion">5.12.1</xf:set>

<xf:if is="fa_weight() == 'l'">
    <link rel="preload" href="{{ base_url('styles/fonts/fa/fa-light-300.woff2?_v=' . $faVersion) }}" as="font" type="font/woff2" crossorigin="anonymous" />
<xf:elseif is="fa_weight() == 'r'" />
    <link rel="preload" href="{{ base_url('styles/fonts/fa/fa-regular-400.woff2?_v=' . $faVersion) }}" as="font" type="font/woff2" crossorigin="anonymous" />
<xf:elseif is="fa_weight() == 's'" />
    <link rel="preload" href="{{ base_url('styles/fonts/fa/fa-solid-900.woff2?_v=' . $faVersion) }}" as="font" type="font/woff2" crossorigin="anonymous" />
</xf:if>
<xf:if is="fa_weight() != 's'">
    <link rel="preload" href="{{ base_url('styles/fonts/fa/fa-solid-900.woff2?_v=' . $faVersion) }}" as="font" type="font/woff2" crossorigin="anonymous" />
</xf:if>

<link rel="preload" href="{{ base_url('styles/fonts/fa/fa-brands-400.woff2?_v=' . $faVersion) }}" as="font" type="font/woff2" crossorigin="anonymous" />

and change it to..

<xf:set var="$faVersion">5.12.1</xf:set>

<xf:if is="fa_weight() == 'l'">
    <link rel="preload" href="{{ base_url('styles/fonts/fa/fa-light-300.woff2?_v=' . $faVersion) }}" as="font" type="font/woff2" crossorigin="anonymous" />
<xf:elseif is="fa_weight() == 'r'" />
    <link rel="preload" href="{{ base_url('styles/fonts/fa/fa-regular-400.woff2?_v=' . $faVersion) }}" as="font" type="font/woff2" crossorigin="anonymous" />
<xf:elseif is="fa_weight() == 's'" />
    <link rel="preload" href="{{ base_url('styles/fonts/fa/fa-solid-900.woff2?_v=' . $faVersion) }}" as="font" type="font/woff2" crossorigin="anonymous" />
<xf:else />
    <link rel="preload" href="{{ base_url('styles/fonts/fa/fa-solid-900.woff2?_v=' . $faVersion) }}" as="font" type="font/woff2" crossorigin="anonymous" />
</xf:if>

<link rel="preload" href="{{ base_url('styles/fonts/fa/fa-brands-400.woff2?_v=' . $faVersion) }}" as="font" type="font/woff2" crossorigin="anonymous" />

The change is only the if/else request to load just the font you choose in the style properties.

 

[dethfire]

The best way to reduce the FontAwesome fonts or files is to change the template font_awesome_setup, so you only request the required font and not all fonts. Your addon is nice, but if you reduce the included fonts there are always issues with third party addons and/or themes.

I actually did this awhile back but they were still loading via js

 

[McAtze]

I can't find any font loading via js. Where did you make this screenshot and with what?

 

[Russ]

That's not something I'd want to support on a style level, to be honest. It'd be a nightmare to support everyone. Plugins, custom nav icons, node icons, specific icon changes, font awesome weight changes, and so many more it just seems like a never-ending road of changes, this should be done at a per-site level.

I haven't dived too far into it, but really the only additional icons we use are in the sidebar headings and navigation. Both of which are completely optional.

 

[dethfire]

I can't find any font loading via js. Where did you make this screenshot and with what?

chrome 83 dev tools network tab

 

[Anatoliy]

Nova

Nova with reduced fa files

 

[Russ]

Again, this has nothing to do with our styles but how XenForo approaches it. Post #7 in this thread explains why I will not support something like reducing the FA files on a style-level release.


@Anatoliy you can always disable Nova's google fonts and load the system fonts to reduce it even further.

I don't take these measures very seriously though, most of google's own websites score awful.

 

[dethfire]

I don't take these measures very seriously though, most of google's own websites score awful.

when you make the rules, you don't need to play by them, doesn't make them not important for the rest of us.

 

[Russ]

when you make the rules, you don't need to play by them, doesn't make them not important for the rest of us.

True, but when I say I don't take them seriously I'm referring to the fact that the bulk of the problems in this report are nothing that I can fix on a style-level for the most part. We literally do not add specific things to our styles for a reason. I've always made it a point to minimize features that would add additional overhead to the styles.

Our collapsing functionality? XF helpers we tie into that are already being loaded.
Extra JS? Nope, not unless you enable backstretch or our custom search option (tiny bit of JS to help with the dropdown).
Extra images? Only if you're using one of the more graphical styles such as Fusion Gamer / Omni
Extra CSS? Yes, that's how we add styling to various things. The bulk of our options though are wrapped in conditionals, so if you don't enable it, it won't be loaded.

My best advice forum owners can do on their own:

• Optimize your server properly including proper caching
• Utilize sprites for custom node icons if you're using them
• Use the XF default font (system fonts) so nothing additional is being loaded.
• Reduce the default Font Awesome icon package: https://xenforo.com/community/resources/reduce-fontawesome-icon-font-file-size.7770/
• Stop serving ads (JK). I'll have folks contact me saying the style is loading slow and they have 5+ ads loading from various providers and they take forever to load in.
• Run any image assets through some image optimizer

This is on my official XF demo forum. Set to the default XF style:

The first test of XenBase:

The second test of XenBase:

So our style performed faster than a stock XF setup and to be quite frank, that makes zero sense as we don't remove anything from XF.