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 ?

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 ?

• javascript
• html
• css
• font-awesome

• 1 Probably not the answer you are looking for, but I gave up trying to minify these things even further and now rely on the fact that most sites out there use a public, shared cdn for these common resources, therefore the chances of it already being in the browser cache if you point the resource to the same url is much higher than it used to be. Gotta love standards. – Iskandar Reza Commented Sep 14, 2018 at 22:55
• if use cdn will increase the response time a little bit, if hosting the files by own server, 1000 views count = 1000MB, just try to looking for any easy method to reduce the file size, anyone help – kenken9999 Commented Sep 14, 2018 at 23:00

3 Answers 3

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.

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";

I have often used https://icomoon.io/ to create custom icon fonts with just the required icons. You can easily select icons from FontAwesome and many other collections and even paste in your own icons and logos. It will output all necessary files for you, and IIRC you can also upload projects to continue editing them.