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 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 2

I had the same problem.

Installing the urw-fonts package solved it for me:

yum install urw-fonts

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

Answer 4

I have the same problem on amazon ec2 I fix it by this:

yum install cjkuni-ukai-fonts 

Answer 5

Also you can try instaling dependencies - FontConfig & FreeType

yum install fontconfig
yum install freetype*

Answer 6

You can run the script with command line parameters:

phanthomjs --output-encoding=cp866 [params] [filename]

Answer 7

I faced same issue with Arabic fonts. This is what i did.

yum groupinstall 'Arabic Support'.

Installing Arabic Support solved it for me.

Answer 8

Try this for Chinese.

yum install bitmap-fonts bitmap-fonts-cjk

Answer 9

leave the /etc/fonts/fonts.conf file alone. the example above is making only Japanese work

yum install -y ipa-gothic-fonts.noarch ipa-mincho-fonts.noarch cjkuni-ukai-fonts.noarch bitmap-fonts bitmap-fonts-cjk urw-fonts fontconfig freetype*

yum groupinstall -y 'Korean Support' 'Chinese Support' 'Japanese Support' 'Kannada Support' 'Hindi Support' 'Arabic Support'

fc-cache -vf

Answer 10

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.