phantomjs screenshot font missing, boxes rendered

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 have the same problem on amazon ec2 I fix it by this:

yum install cjkuni-ukai-fonts 

Answer 2

Add a style section to your HTML section Something like this:

<style type="text/css">
@font-face
{
    font-family:MyFont;
    src: url('MyFont.ttf') format('truetype');
}

#barcodefont
{
    font-family:MyFont;
    font-size: 42px;
    color:black;
}
</style>

Then to use the font in the main HTML code do this:

<div id="MyFont">Your text using MyFont</div>

For this to work, your HTML file and your MyFont.ttf file both have to be in the PhantomJS directory that you are doing the conversion.

Answer 3

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 4

Also you can try instaling dependencies - FontConfig & FreeType

yum install fontconfig
yum install freetype*