How to reduce the size of FontAwesome 5.3.1

Question

Using SVG with JavaScript is 20x large than Using Web Fonts with CSS.

This is a big problem if I use Using SVG with JavaScript, not counting other js, jquery, bootstrap. Loading only FontAwesome 5 almost used 1MB.

Anyone know how to reduce the file size ?

Answer 1

You probably don't need all of Font-Awesome. Don't load all of it. Choose only the icons you need, and load them individually as <img src='path'> where path points to an .svg file you download from here. If you're fancy, you could combine all of these images into a spritesheet like Google does [google.com spritesheet].

If you insist on loading all of these assets just to support Font Awesome, gzipping your text assets (html, js, css) will greatly reduce file size. There are lots of tutorials on how to gzip and upload assets to a static file server example.

You may also wish to combine your JS files into a single file to minimize network traffic. For this you'd want some kind of "build system" like rollup or webpack.

If you really want to tune performance, check out High Performance Websites and Even Faster Websites, both phenomenal O'REILLY books that can help you increase performance of content delivery.

Answer 2

I use https://fontforge.org to remove unused glyphs

1. Install (for mac, also available for most platforms)

brew install fontforge

2. Python3 script

fa-prune.py

#!/usr/local/bin/python3
import fontforge
import re
import glob
import os
import sys

if len(sys.argv) < 3:
    sys.exit()

#https://fontforge.org/docs/scripting/python/fontforge.html
#fa-prune.py ./assests/fontawesome './pages/**/*,./components/**/*,./layouts/**/*'
#fa-prune.py ./web/fontawesome './public/assets/**/*.js'

# Scan webpack assets
# rootDir = '/Users/ybb/devel/home/yo/web/fontawesome'
# scanPaths = [
#     '/Users/ybb/devel/home/yo/public/assets/**/*.js'
# ]

# Scan nuxt source
# rootDir = '/Users/ybb/devel/home/cs-web/assets/fontawesome'
# scanPaths = [
#     '/Users/ybb/devel/home/cs-web/pages/**/*',
#     '/Users/ybb/devel/home/cs-web/components/**/*',
#     '/Users/ybb/devel/home/cs-web/layouts/**/*'
# ]

rootDir = os.path.abspath(sys.argv[1])
scanPaths = list(map(lambda x: os.path.abspath(x), sys.argv[2].split(',')))

# print(rootDir, scanPaths)
# sys.exit()

inDir = rootDir + '/webfonts'
outDir = rootDir + '/webfonts-min'

fonts = {'fas': 'fa-solid-900.svg', 'far': 'fa-regular-400.svg'}
exts = ['svg', 'ttf', 'woff', 'woff2', 'eot']

icons = {}

pattern = re.compile("\"(" + '|'.join(list(fonts)) + ")\s(fa-\w[-\w]*)\"")

for scanPath in scanPaths:
    for filename in glob.glob(scanPath, recursive=True):
        if not os.path.isdir(filename):
            for line in open(filename):
                for match in re.finditer(pattern, line):
                    if not match.group(1) in icons:
                        #print(match.group(2))
                        icons[match.group(1)] = set()
                    icons[match.group(1)].add(match.group(2)[3:])

os.makedirs(outDir, exist_ok=True)

for font in icons:
    f = fontforge.open(inDir + '/' + fonts[font])

    for icon in icons[font]:
        f.selection.select(('more', None), icon)


    for i in f.selection:
        try:
            name, width = f[i].glyphname, f[i].width
            print(font, i, name, width)
        except:
            pass

    f.selection.invert()
    for i in f.selection.byGlyphs:
        f.removeGlyph(i)    
            
    filePath = outDir + '/' + fonts[font].rsplit('.', 1)[0]
    for ext in exts:
        f.generate(filePath + '.' + ext)
        print(filePath + '.' + ext, 'generated')
        
    os.remove(filePath + '.afm')

3. Expected output

fa-prune.py ./fontawesome '../public/assets/**/*.js'

fas 114 heart 512
fas 122 times 352
fas 123 search-plus 512
fas 190 arrow-left 448
fas 355 ellipsis-v 192
fas 385 thumbs-up 512
fas 386 thumbs-down 512
fas 467 venus 288
fas 468 mars 384
fas 698 level-down-alt 320
fas 702 map-marker-alt 384
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.svg generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.ttf generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.woff generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.woff2 generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-solid-900.eot generated
far 114 heart 512
far 121 check 512
far 122 times 320
far 125 power-off 512
far 127 cog 512
far 190 arrow-left 448
far 204 eye 576
far 206 exclamation-triangle 576
far 224 comments 576
far 256 link 512
far 354 ellipsis-h 512
far 428 paper-plane 512
far 429 history 512
far 520 comment-alt 512
far 570 trash-alt 448
far 589 images 576
far 842 comment-alt-lines 512
far 909 user-friends 640
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.svg generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.ttf generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.woff generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.woff2 generated
/Users/ybb/devel/home/yo/web/fontawesome/webfonts-min/fa-regular-400.eot generated

4. Set up fontawesome font path

fonts.scss

$fa-font-path: "../fontawesome/webfonts-min";
@import "../fontawesome/scss/solid";
@import "../fontawesome/scss/regular";