Using TTF fonts with PhantomJS on Ubuntu

Posted on

I was recently tasked with figuring out how to automate the generation of a PDF file from one of my EmberJS apps. I discovered that PhantomJS had the ability to rasterize a rendered webpage out to PDF. It was really easy to get set up, but then I discovered this:

PhantomJS was having an issue where my custom font was not rendering. I needed to figure out the best way to expose my custom licensed font (Helvetica Neue) to PhantomJS. The first thing I found was this blog post that was mentioned all over the internet. It suggested converting the file from TrueType over to a Type1 format, but that wasn’t working for me.

I managed to get PhantomJS working with a TTF font by following these steps:

  1. Create a folder in the /usr/share/fonts/truetype directory for your font. For example, /usr/share/fonts/truetype/helvetica.
  2. Place your .ttf font in the newly created directory.
  3. Clear your font cache by running fc-cache -fv.

You’re all set! Run your script again, and you should see your new font.

Find an issue?
Open a pull request against my blog on GitHub.
Ben Limmer