Jump to content
Sign in to follow this  
mki

How to Reduce the Size of Font Awesome Fonts Easily

Recommended Posts

So I really like Font Awesome, the only issue I have with it is that, it forces the user to download a bunch of unneeded icons and the main SVG file is like 450KB.

I knew about Fontello, but I didn't have the foresight to use Fontello from day one, which honestly would have been a major pain, since I had no idea what icons I wanted to use. This would have forced me to keep regenerating the Fontello files (I realize now, this is what I should have done.) The CSS Fontello generates is not the same as Font Awesome, so to migrate from one to the other would either require redoing my HTML, or redoing the CSS. Fontello allows you to pick which icons you want to use and then generates a custom font with only those glyphs and this saves on file size quite a bit. In my case, I went from a 450KB SVG file, to about 20KB and the other files were reduced as well. I also replaced one of the the icons I did not like and may do the same for some other icons later.

To achieve what I wanted to do, it seemed like I was going to have to redo either my HTML or my CSS. A quick hack I came up with was to do neither. Since I was already using the Font Awesome CSS and had no issues with it, all I did was rename the fonts that Fontello created, to the same filenames that come with Font Awesome and answered the question: "Will it Blend?" and yes it appears to work fine.

The glyphs must have the same codes or this will not work.

When I first attempted this, Fontello changed about half of the codes (the codes started with E not F), so I had to correct the codes Fontello was generating by replacing them with the codes used by Font Awesome. This took a little bit of time looking the icon names up and grabbing the code out of the Font Awesome CSS file, but I'm still confident it was faster than redoing the icon fonts.

This works because the font file formats are all standardized formats and the only difference is the CSS.

Alternatively, you could use a tool like Font Forge, to delete the unused icons from the SVG file and then generate the other files. I have Font Forge and this method seems like it would be harder and take longer.

Share this post


Link to post
Share on other sites

SEMrush

Phew, so from what you said l think that you want someone to load it into a font creation software and strip off all of the crap?

Send me the OTF or TTF files and a graphic or text of what you don't want and l should be able to fix it.

B)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.