phantomjs font rendering issue

Question

Using phantomjs v1.9.7, the latest version, there's a problem rendering some characters on my production server. No problems on dev server.

In rendering the phantomjs.org homepage, the fonts with "strong" tag or some kind of bold font like "700em" render correctly, but normal font-weight aren't.

I haven't noticed this problem with any other urls yet.

Also all Chinese characters from any url (that I've checked so far) render with boxes on the production server, but correctly on the dev server.

I have no idea what the problem is.

Here's a screenshot of a section of http://phantomjs.org for each server:

production server - debian 7 stable phantomjs.com - production server - debian 7 stable

dev server - debian 8 testing phantomjs.com - dev server - debian 8 testing

Here's the screenshots of http://taoboa.com

production - debian 7 stable

taobao.com - production server -debian 7 stable

dev server - debian 8 testing

taobao.com - dev server - debian 8 testing

Any thoughts? Thanks for the help.

I found some thread about it: [an answare/solution here](https://stackoverflow.com/questions/15029002/phantomjs-screenshot-font-missing-boxes-rendered-instead "here") and [here](http://code.google.com/p/phantomjs/issues/detail?id=460) — huncyrus, Apr 09 '14 at 15:57
Thanks for responding. I had already read, and tried, those before posting this, but I did solve this problem (below). — Jeff Agee, May 05 '14 at 00:18

score 3 · Accepted Answer · answered May 05 '14 at 00:25

3

What I ended up doing is updating my server from Debian 7 to Ubuntu 13.10, and that solved the problem. I really don't know what packages were causing the problem -- possibly fontconfig or libfreetype6...I don't know.

answered May 05 '14 at 00:25

Jeff Agee

141
1
15

João Pimentel Ferreira · Answer 2 · 2017-05-17T12:14:25.747

Regarding Japanese, Chinese, Hindi, etc. characters, I was having a problem with phantomjs and rendering of fonts for such special characters, and that's how I solved the problem:

Download the corresponding .ttf Unicode fonts file. There are several free sites on the web, but you have several Unicode fonts free files for several different character maps here.
Save the .ttf files in your server/machine either in the directory /etc/fonts or in the directory ~/.fonts. The latter is also a unix directory, if it does not exist, create it, and you need it if you have no root privileges (shared server for example)
Run either fc-cache -fv /etc/fonts or fc-cache -fv ~/.fonts/ accordingly. This fc-cache command scans the font directories on the system and builds font information cache files

Then in the phantomjs code, use always utf-8 either for file system

var HTMLfile = fs.open(path + file_name, {
    mode: 'r', //read
    charset: 'utf-8' 
});
var content = HTMLfile.read();
HTMLfile.close();

or for webpage

var webPage = require('webpage');
var page = webPage.create();
var settings = {
  operation: "POST",
  encoding: "utf8",
  headers: {
    "Content-Type": "application/json"
  },
  data: JSON.stringify({
    some: "data",
    another: ["custom", "data"]
  })
};

After long search, it worked for me.

phantomjs font rendering issue

2 Answers2