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