Not Planned Reducing font awesome footprint

dethfire

Customer
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?
 

McAtze

Customer
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..
Original template:
<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" />

Screenshot 2020-06-02 17.51.13.png


and change it to..
Changed template:
<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" />

Screenshot 2020-06-02 17.51.39.png


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

dethfire

Customer
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

fa.PNG
 

Russ

Pixel Exit Staff
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.
 

Russ

Pixel Exit Staff
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.
 

Russ

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

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:

testXF.png



The first test of XenBase:
testXB.png




The second test of XenBase:

Screenshot_13.png



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.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.