Using TTF fonts with PhantomJS on Ubuntu
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:
- Create a folder in the
/usr/share/fonts/truetype
directory for your font. For example,/usr/share/fonts/truetype/helvetica
. - Place your
.ttf
font in the newly created directory. - Clear your font cache by running
fc-cache -fv
.
You’re all set! Run your script again, and you should see your new font.