XF 2.1 Why font awesome files so big?

dethfire

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:
Sort by date Sort by votes
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?
 
Upvote 0 Downvote
While looking into this, I found this very interesting tool:

github.com

GitHub - nazar-pc/docker-subset-font: Modifies font file to only include characters from specified CSS file

Modifies font file to only include characters from specified CSS file - nazar-pc/docker-subset-font
github.com github.com

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...
 
Upvote 0 Downvote
DeltaHF said:
While looking into this, I found this very interesting tool:

github.com

GitHub - nazar-pc/docker-subset-font: Modifies font file to only include characters from specified CSS file

Modifies font file to only include characters from specified CSS file - nazar-pc/docker-subset-font
github.com github.com

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...
Click to expand...

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
 
Upvote 0 Downvote
arn said:
Apparently it is a thing: https://blog.webjeda.com/optimize-fontawesome/
Click to expand...
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:

gist.github.com

Limit FontAwesome to just those Glyphs I want to use

Limit FontAwesome to just those Glyphs I want to use - fontforge-limit-glyphs.py
gist.github.com gist.github.com

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... 😍
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
DeltaHF said:
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.
Click to expand...

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.
 
Upvote 0 Downvote
DeltaHF said:
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:

gist.github.com

Limit FontAwesome to just those Glyphs I want to use

Limit FontAwesome to just those Glyphs I want to use - fontforge-limit-glyphs.py
gist.github.com gist.github.com

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... 😍
Click to expand...

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'
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
DeltaHF said:
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?
Click to expand...

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:
Upvote 0 Downvote
You must log in or register to reply here.
Top Bottom