XF 2.1 Why font awesome files so big?

dethfire

Well-known member
I've been looking to speed up my site and something I can't understand is why font awesome files are so massive. It seems like they've more than tripled in size the past few years. For example, ~30% of every XF.com forum page's overhead is due to loading the 3 font awesome files. That is crazy!

In XF1 my FA file size is only 70kb, now between the 3 is over 300kb!
 
Last edited:

arn

Well-known member
presumably they only load the one time when you first visit and are then cached. but still doesn't help the initial page load times in terms of Google PageSpeed Insights.

It does seem like overkill given how many icons are used vs how many there are. Any font-trimming services out there? Can we get a font-awesome file that only has what we need?
 

DeltaHF

Well-known member
While looking into this, I found this very interesting tool:


It takes a CSS file and a .woff2 font file as input, reads the CSS file and determines which characters are used, and then produces an optimized .woff2 file. The problem is that XenForo includes classes for all of the FontAwesome icons (to be used with the <xf:fa> tag, I guess), so you'd have to take all those out of the CSS files, search all your templates to find which ones are actually used in your theme, replace them into the CSS, run the CSS through the tool, and then replace the .woff2 file on your server.

I think that would do it, but it's a lot of work. I sure would love to trim down that 300KB of icon font files...
 

arn

Well-known member
While looking into this, I found this very interesting tool:


It takes a CSS file and a .woff2 font file as input, reads the CSS file and determines which characters are used, and then produces an optimized .woff2 file. The problem is that XenForo includes classes for all of the FontAwesome icons (to be used with the <xf:fa> tag, I guess), so you'd have to take all those out of the CSS files, search all your templates to find which ones are actually used in your theme, replace them into the CSS, run the CSS through the tool, and then replace the .woff2 file on your server.

I think that would do it, but it's a lot of work. I sure would love to trim down that 300KB of icon font files...

Yep, that would be cool. Outside the WYSISYG editor, I feel like I use just a handful.

We just need to preprocess the CSS with a tool that checks what CSS you actually use. :)

arn
 

DeltaHF

Well-known member
I've been tinkering with the FontForge as mentioned in this link. There is an interesting comment at the bottom of that page which takes you to this FontForge Python script:


The script allows you to simply list the names of all the icons you want to keep in the font. This method is a bit easier to use than the Docker-based script I linked above, though it's not quite as powerful as it doesn't scan the CSS file for you.

I just had success running it with the sample list of icons provided.

It reduced fa-regular-400.woff2 from 167KB to 3KB... 😍
 

DeltaHF

Well-known member
I definitely think they care. I think they just want to make it easy for anyone to be able to use any FontAwesome icon in their style without a lot of extra work. We effectively paid for the full FontAwesome Pro set in our XenForo license, so it's good to have access to them all.

This is really more on FontAwesome. As a commercial icon provider, should offer a tool that makes it easier to create a subset font of the icons you want.
 

Anatoliy

Well-known member
I definitely think they care. I think they just want to make it easy for anyone to be able to use any FontAwesome icon in their style without a lot of extra work. We effectively paid for the full FontAwesome Pro set in our XenForo license, so it's good to have access to them all.

This is really more on FontAwesome. As a commercial icon provider, should offer a tool that makes it easier to create a subset font of the icons you want.

That all sound right. But I'd love if XF by default include in css only those that they use in their default template. With an option to customize.
 

arn

Well-known member
I've been tinkering with the FontForge as mentioned in this link. There is an interesting comment at the bottom of that page which takes you to this FontForge Python script:


The script allows you to simply list the names of all the icons you want to keep in the font. This method is a bit easier to use than the Docker-based script I linked above, though it's not quite as powerful as it doesn't scan the CSS file for you.

I just had success running it with the sample list of icons provided.

It reduced fa-regular-400.woff2 from 167KB to 3KB... 😍

Nice!

Here are all the fa icons for the xf 2.1 editor:

Code:
'fa-eraser',
'fa-bold',
'fa-italic',
'fa-underline',
'fa-strikethrough',
'fa-tint',
'fa-font',
'fa-text-height',
'fa-link',
'fa-image',
'fa-video-plus',
'fa-smile',
'fa-video',
'fa-quote-right',
'fa-flag',
'fa-flag-checkered',
'fa-code',
'fa-terminal',
'fa-align-left',
'fa-list-ol',
'fa-list-ul',
'fa-indent',
'fa-outdent',
'fa-table',
'fa-undo',
'fa-redo',
'fa-save',
'fa-cog',
'fa-ellipsis-v-alt',
'fa-ellipsis-h-alt'
 

arn

Well-known member
hah. I just tried this and failed miserably. It was a quick hack to see. I was able to use FontForge to create a subset of icons. But then replacing that font for font-awesome didn't work. At least in my quick attempt. Will have to look into it a little more later.
 

DeltaHF

Well-known member
Got it! I put your list into the script (removing the fa- prefix from each one), exported a new .woff2 file, replaced it in my dev board, and it worked. :D

There were two missing icons in the editor bar (the ellipses and bullet list) but that's an easy fix. Resulting font file was 3.5KB.

Now, all we need to do is compile a list like that of all the icons used in the default XenForo theme.

Does anyone have an idea about the best way to go about making such a list?
 

arn

Well-known member
Got it! I put your list into the script (removing the fa- prefix from each one), exported a new .woff2 file, replaced it in my dev board, and it worked. :D

There were two missing icons in the editor bar (the ellipses and bullet list) but that's an easy fix. Resulting font file was 3.5KB.

Now, all we need to do is compile a list like that of all the icons used in the default XenForo theme.

Does anyone have an idea about the best way to go about making such a list?

I did it somewhat manually.

I visited my 3 main page views. Forum Home, Forum Index, and Thread. Grabbed the source

  • grep'd them for "fa-"
  • Cleaned them up in a text editor
  • Ran it through grep, sort, and uniq to get individual names
If you are good at sed, you could do it in one go I imagine.

This ended up being my final list:

desiredGlyphNames = ['eraser','bold','italic','underline','strikethrough','tint','font','text-height','link','image','video-plus','smile','video','quote-right','flag','flag-checkered','code','terminal','align-left','list-ol','list-ul','indent','outdent','table','undo','redo','save','cog','ellipsis-v-alt','ellipsis-h-alt','arrow-down','arrow-up','chevron-up','cog','comment','comment','comments','compress-alt','email','facebook','globe','info-circle','instagram','list-ul','map-marker','rss','rss','search','share-alt','thumbs-up','twitter','user','window-close','YouTube']

edit: see https://xenforo.com/community/threads/why-font-awesome-files-so-big.171937/post-1423710

Which template did you change and what did you change to swap out the font?

arn
 
Last edited:
Top