phantomjs screenshot font missing, boxes rendered instead

Question

I am using PhantomJs 1.8.1 on Centos 6.3 to for automated ui tests. When a test fails, screenshots are saved to the file system.

My problem is that even though the screenshots are saved, they do not contain readable fonts.

So if the website reads like this:

Hello, World!

the screenshot of the site will look like this:

So, instead of the actual letters, it renders and saves little boxes.

The system is centos 6.3. Freetype and Fontconfig are also installed.

How could i go about fixing this?

Thx!

Answer 1

I had the same problem.

Installing the urw-fonts package solved it for me:

yum install urw-fonts

Answer 2

I had a similar problem with Japanese fonts. (PhantomJS 1.9.1, Redhat on Amazon EC2)

English characters showed up fine, but Japanese characters were rendered as boxes.

How I fixed it:

1) Installed the (Japanese) IPA fonts (Mincho and Gothic) using yum install.

(Use yum list to check the exact package names.)

2) The IPA .ttf files were installed to:

• /usr/share/fonts/IPA-Gothic/
• /usr/share/fonts/IPA-Mincho/

3) Move the two downloaded .ttf files to this directory: (Create it)

• /usr/share/fonts/ipa/

4) Make a backup of /etc/fonts/fonts.conf

5) Edit the original /etc/fonts/fonts.conf and fill it with this:

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <dir>/usr/share/fonts/ipa</dir>
  <cachedir>/var/cache/fontconfig</cachedir>
  <cachedir>~/.fontconfig</cachedir>
  <alias>
    <family>serif</family>
    <prefer>
      <family>IPAP Mincho</family>
    </prefer>
  </alias>
  <alias>
    <family>sans serif</family>
    <prefer>
      <family>IPAP Gothic</family>
    </prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer>
      <family>IPA Gothic</family>
    </prefer>
  </alias>
</fontconfig>

6) Refresh your font cache with fc-cache -vf

7) Enjoy your new working fonts.

Gotchas:

• If you're getting no characters (blank space), your font cache is probably out of date. Try fc-cache -vf to regenerate it.

• There's a fix for Japanese/Chinese/Korean characters in the 1.9.1 release. Not sure if it makes a difference, but probably worth upgrading from 1.9.0.

Answer 3

For Chinese font, I had it solved by the following steps:

sudo apt-get install language-pack-zh-hans
sudo apt-get install ttf-arphic-uming
sudo apt-get install ttf-dejavu ttf-wqy-microhei
sudo fc-cache -f -v

OS is Ubuntu 12.04 LTS