Xenforo How To Install Fonttools For Xenforo Font Awesome Manager Addon

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/

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

---

 

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.



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.



After



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)

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.





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