Have been testing cases this against recent builds of PhantomJS on Mac OS X and linux. We've discovered that PhantomJS seems to have an issue with OTF and/or Postscript data in WOFF files. WOFFs compiled from TTF data display fine however.
For us this has implications in being able to use commercially available web fonts which frequently have OTF and even Postscript encapsulated in them. At the moment PhantomJS seems not to handle these. :-( We'll keep trucking for a solution.
We have many test screenshots that bare this out. Hassle me if you'd like to see them.
@benjigreig Were the fonts displaying correctly when using older versions of PhantomJS (namely 1.9.2)?
Hi @jory. I work with benjigreig. I haven't been debugging the font issue, but I do wrangle the servers and deploy the binaries.
We see the font issues running 1.9.2. This is deployed by wrapping the binary from the PhantomJS Linux .tar.bz2 in a .deb, but I don't think that should have any bearing on the problem.
The host system is Ubuntu 12.04.4. We have:
$ dpkg -l | egrep 'lib(fontconfig|freetype)' | cut -c-64
ii libfontconfig1 2.8.0-3ubuntu9.1
ii libfreetype6 2.4.8-1ubuntu2.1
I can switch 1.9.2 out with whatever other version to assist with a fix.
I made a repo with the test case I've been seeing.
I'm including a base64 encoded WOFF of Revalia on the page, and running it on a simple web server on port 3131.
Here it is in Chrome:
Here it is using 1.9.2:
And here's 1.9.7:
1.9.2 does properly render the font, but I see the following output in the console:
2014-02-27 10:26:34.429 phantomjs[13643:507] CoreText performance note: Client called CTFontCreateWithName() using name "Revalia" and got font with PostScript name "Revalia-Regular". For best performance, only use PostScript names when calling this API.
2014-02-27 10:26:34.430 phantomjs[13643:507] CoreText performance note: Set a breakpoint on CTFontLogSuboptimalRequest to debug.
This issue seem to persist on phantom 2.0, compiled and run on Ubuntu x64 14.04 LTS
Here is an example of the Google font "Montserrat" in Google Chrome
Here is the same in phantomjs 2.0
On the image you see that the P is cut on the right corner, same thing happens with other letters.
Also the google font "Oswald" doesn't render at all.