Discover Centmin Mod today
Register Now

Xenforo How To Install Fonttools For Xenforo Font Awesome Manager Addon

Discussion in 'Forum software usage' started by eva2000, Feb 3, 2022.

Thread Status:
Not open for further replies.
  1. eva2000

    eva2000 Administrator Staff Member

    49,586
    11,382
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +17,686
    Local Time:
    11:44 AM
    Nginx 1.21.x
    MariaDB 10.x
    For folks using Xenforo and want to optimize their Fontawesome font file sizes, Kirby has a Font Awesome Manager Addon. The addon requires installing fonttools which has the pyftsubset tool needed by the addon and some dependencies. The below guide is for installing fonttools via CentOS 7's native Python 3.6 support which will install fonttools 4.27.1.

    CentOS 7's Python version defaults to Python 2.7, but you can install Python 3.6 side by side with Python 2.7 as outlined on Centmin Mod blog at CentOS 7 Python 2.7 Upgrade Deprecation Message - End Of Life January 1st, 2020 - Centmin Mod Blog. For Python 3.7+, you'd need to source compile or build your own Python 3.7+ RPMs https://community.centminmod.com/th...7-3-8-3-9-3-10-rpm-builds-for-centos-7.22456/ :D

    The below steps are for installing Python 3.6 and setting up a virtual environment sandbox to install fonttools and dependencies so they are not mixing with the system Python environment.

    Run addons/python36_install.sh to install CentOS 7 system python 3.6 YUM package install
    Code (Text):
    /usr/local/src/centminmod/addons/python36_install.sh
    

    Then install virtualenv and create a directory to house the python projects at /home/python_projects. You're telling virtualenv to create an environment with default python 3.6 binary /usr/bin/python3.6 and name the virtual environment as fonttools. Then using source command to activate the environment
    Code (Text):
    pip install virtualenv
    mkdir -p /home/python_projects
    cd /home/python_projects
    virtualenv -p /usr/bin/python3.6 fonttools
    source fonttools/bin/activate
    

    With the fonttools environment activated run the commands to update pip and install fonttools and dependencies.
    Code (Text):
    # pip doesn't like ccache so disable it
    export CC='gcc'
    export CXX="g++"
    
    # pip needs a tmp directory that doesn't have noexec restrictions
    mkdir -p /home/piptmp
    chmod 1777 /home/piptmp
    export TMPDIR=/home/piptmp
    
    python3.6 -m pip install -U pip
    pip --version
    python3.6 -m pip install fonttools --verbose --force
    python3.6 -m pip install fonttools[woff] --verbose --force
    python3.6 -m pip install brotli --verbose --force
    

    You can find where pyftsubset was installed via locate command and you can see it was
    Code (Text):
    updatedb
    locate pyftsubset
    /home/python_projects/fonttools/bin/pyftsubset
    

    After running Font Awesome Manager for PixelExit's FlatAwesome+ style, it generated new optimized/reduced size Fontawesome files dated Feb 3, 2022
    Code (Text):
    ls -lAhrt fonts/fa
    total 1.9M
    -rw-r--r-- 1 nginx nginx 134K Jan 17 00:21 fa-solid-900.woff2
    -rw-r--r-- 1 nginx nginx 180K Jan 17 00:21 fa-solid-900.woff
    -rw-r--r-- 1 nginx nginx 165K Jan 17 00:21 fa-regular-400.woff2
    -rw-r--r-- 1 nginx nginx 220K Jan 17 00:21 fa-regular-400.woff
    -rw-r--r-- 1 nginx nginx 180K Jan 17 00:21 fa-light-300.woff2
    -rw-r--r-- 1 nginx nginx 240K Jan 17 00:21 fa-light-300.woff
    -rw-r--r-- 1 nginx nginx 178K Jan 17 00:21 fa-duotone-900.woff2
    -rw-r--r-- 1 nginx nginx 253K Jan 17 00:21 fa-duotone-900.woff
    -rw-r--r-- 1 nginx nginx  75K Jan 17 00:21 fa-brands-400.woff2
    -rw-r--r-- 1 nginx nginx  88K Jan 17 00:21 fa-brands-400.woff
    -rw-r--r-- 1 nginx nginx 4.4K Feb  3 10:13 fa-brands-400-min.woff
    -rw-r--r-- 1 nginx nginx 3.7K Feb  3 10:13 fa-brands-400-min.woff2
    -rw-r--r-- 1 nginx nginx  20K Feb  3 10:13 fa-light-300-min.woff
    -rw-r--r-- 1 nginx nginx  16K Feb  3 10:13 fa-light-300-min.woff2
    -rw-r--r-- 1 nginx nginx  19K Feb  3 10:13 fa-regular-400-min.woff
    -rw-r--r-- 1 nginx nginx  15K Feb  3 10:13 fa-regular-400-min.woff2
    -rw-r--r-- 1 nginx nginx  16K Feb  3 10:13 fa-solid-900-min.woff
    -rw-r--r-- 1 nginx nginx  13K Feb  3 10:13 fa-solid-900-min.woff2
    -rw-r--r-- 1 nginx nginx  23K Feb  3 10:13 fa-duotone-900-min.woff
    -rw-r--r-- 1 nginx nginx  18K Feb  3 10:13 fa-duotone-900-min.woff2
    -rw-r--r-- 1 nginx nginx 1.6K Feb  3 10:13 fa-solid-900-man.woff
    -rw-r--r-- 1 nginx nginx 1.2K Feb  3 10:13 fa-solid-900-man.woff2
    -rw-r--r-- 1 nginx nginx 1.6K Feb  3 10:13 fa-regular-400-man.woff
    -rw-r--r-- 1 nginx nginx 1.1K Feb  3 10:13 fa-regular-400-man.woff2
    


     
  2. eva2000

    eva2000 Administrator Staff Member

    49,586
    11,382
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +17,686
    Local Time:
    11:44 AM
    Nginx 1.21.x
    MariaDB 10.x
    Here's before and after Webpagetest filmstrip using worse case Moto G4, Chrome with 3G Fast 1.6Mbps download speed profile in Dulles, VA USA region. Forums has 2 Google Analytic trackers too one for GA v4 and one for GA Universal tag.

    xf22-before-vs-after-motog4-3g-fast-chrome-01.png

    Before - look at Total Bytes size and the Speed Index/LCP times. Note the mark_ft_s/mark_ft_e denote the start and end times for Fontawesome loading and difference is their load time.

    xf22-before-01.png

    After

    xf22-after-01.png

    Here's before and after video for Webpagetest compare for before Fontawesome Manager optimized Fontawesome files and after. Notice the woff2 files red line length for the downloads. You can ignore the other files that's just optimized run for my Xenforo 2.2 test installation with PixelExit's Flatawesome+ style (yes testing for this forums eventual upgrade) :D



    Google Page Speed Insights After run. Slightly penalised due on TTI/TBT to having 2 Google Analytic trackers too one for GA v4 and one for GA Universal tag.

    psi-xf-after-01.png

    psi-xf-after-02.png

    And here's Webpagetest after test for Chrome Desktop 5mbps cable Virginia, USA test

    xf22-after-cable-5mps-01.png
     
    Last edited: Feb 3, 2022
Thread Status:
Not open for further replies.