DEV Community

Cover image for Installing fonts on a remote server
Alen Duda for Bornfight

Posted on

Installing fonts on a remote server

Recently we encountered an interesting situation after migrating our web application to a new server - all the generated PDFs started to look slightly different than before. This was unexpected as no changes were made to fonts, yet after a short research the conclusion was that the fonts were different.

We used Adobe Acrobat to check for font names and found three different results for old server, new server and locally generated PDFs. This pointed to the fact that the generic sans-serif font family was declared and the tool we use for PDF generation (wkhtmltopdf) used the default sans-serif font available on the operating system the application was running on (Helvetica on local Mac OS and DejaVu Sans on new CentOS Linux 7 server). Since the documents were required to look the same and wkhtmltopdf has issues with Webfonts, the agreed solution was to install the same old font and set it as the default sans-serif on the new remote server.

Gathering information and preparing directories

After SSH-ing to the remote server, we checked which operating system was present:

cat /etc/os-release
Enter fullscreen mode Exit fullscreen mode

We also used the following commands to check

fc-match -a  # print which fonts are used
fc-list # print where font files are located
Enter fullscreen mode Exit fullscreen mode

This gave us enough information for further steps.

On CentOS, custom font files for each user need to be placed inside ~/.fonts directory. Since that directory didn't exist, we created it with

cd # make sure we are in home directory
mkdir .fonts
Enter fullscreen mode Exit fullscreen mode

Uploading and installing the font

After the .fonts directory is created, we needed to upload the font files in that directory. This can be done in multiple ways, but here we will mention the two simplest (if you don't have sudo access).

Option 1: wget from a third-party server

This is a great option if the font in question is available on a publicly available third-party server like TTFonts. Inside the .fonts directory we run:

wget --no-check-certificate "http://ttfonts.net/sfonts/2/27260_NimbusSanL.ttf"
wget --no-check-certificate "https://ttfonts.net/sfonts/2/27258_NimbusSanLBold.ttf"
Enter fullscreen mode Exit fullscreen mode

Notice we used both regular and bold font files.

Option 2: scp from local machine

In case you have the needed font files available on your machine, you need to upload them to the remote. Our colleague Maroje recently wrote a great article about how to do just that and it was very useful.

For this option, open a terminal on your local machine and navigate to the directory which contains your font files.
Since we use SSH on our server and login without a password, we used the following command to copy all .ttf files in current directory to remote server:

scp -i /Users/username/.ssh/public_key.pub *.ttf remote-user@remote-host-ip:~/.fonts
Enter fullscreen mode Exit fullscreen mode

For more information please see Maroje's post as he explained it in more detail.

Setting up the alias

With the font files present on the server, they are ready to be used... but our situation required us to specify that font as the default sans-serif.

This was done by navigating to ~/.config directory and creating a new fontconfig directory to hold our font alias file, which we create using the ubiquitous nano editor.

cd ~/.config
mkdir fontconfig
cd fontconfig
nano fonts.conf
Enter fullscreen mode Exit fullscreen mode

The content of fonts.conf file:

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
<alias>
  <family>sans-serif</family>
  <prefer><family>NimbusSanL</family></prefer>
</alias>
</fontconfig>
Enter fullscreen mode Exit fullscreen mode

And that's it! The new font started being used immediately, even though several references advised to use:

fc-cache -f -v
Enter fullscreen mode Exit fullscreen mode

Conclusion

This was a short tutorial-like post on font installation on a remote Linux machine without GUI. As a mostly front-end dev, this was somewhat out of my comfort zone but very interesting and I was happy with the result. Hopefully this helps somebody and I will put the references for more info.

Alt Text

References

Cover image source

Top comments (0)