Web Fonts do not render, use fallback fonts instead.

[atheken]

atheken@gmail.com commented:

Which version of PhantomJS are you using? Tip: run 'phantomjs --version'.

1.5.1 (development)

What steps will reproduce the problem?

1. Using rasterize.js generate a png of https://developers.google.com/webfonts/
2. You should see stylized text for some of the web fonts.

What is the expected output? What do you see instead?

--see actual/expected images. Web fonts use their fallbacks instead of the "real" fonts.

Which operating system are you using?

Windows 2008 R2

Did you use binary PhantomJS or did you compile it from source?

no, downloaded the (1.5.0 static package from the project website)

Please provide any additional information below.

Disclaimer:
This issue was migrated on 2013-03-15 from the project's former issue tracker on Google Code, Issue #592.
🌟   30 people had starred this issue at the time of migration.

[atheken]

atheken@gmail.com commented:

I just retested this:

This issue appears to be specific to .woff files. I just tried (one) .ttf file (encoded as a data-uri), and the font render perfectly (the font I used is here: http://www.w3schools.com/css3/Sansation_Light.ttf)

I would also note that when I retested this, I had updated to 1.6.0, so it might have been fixed since 1.5.1

[plehoux]

pleh...@gmail.com commented:

Did you mangage to get phantom.js working with google font? Cause I got the exact same issue with Typekit.com and Google Webfonts using phantom.js vers 1.6.1.

[atheken]

atheken@gmail.com commented:

Nope, still an issue in 1.6.1

[ariya]

n...@visual.ly commented:

Is there progress on this issue?

[ariya]

ariya.hi...@gmail.com commented:

Nils, if there is no update posted to this issue, it means there is no progress. Your question has an obvious answer.

[vitallium]

vitaliy....@gmail.com commented:

I have a fix for this issue. But, it will bring new dependency to the current WebKit source tree - zlib (WOFF files are required it). The Qt source tree already has it.

If you interesting, let me know.

In the latest WebKit trunk WOFF files support is disabled by default.

[dmitrykh]

dmitr...@gmail.com commented:

vitaliy....@gmail.com, Can you please provide instructions on how to add support for WOFF files? I really need. I assume phantomjs needs to be compiled from source?

[erikdubbelboer]

e...@dubbelboer.com commented:

I would also be interested in instructions on how to enable WOFF support in 1.7. I'm already using a custom build version (to re-enable flash) so that would be no problem.

[dmitrykh]

dmitr...@gmail.com commented:

Just resolved it. make sure you have all these installed:
[root@phoenix api]# rpm -qa | grep font
fontconfig-2.8.0-3.el6.x86_64
libfontenc-1.0.5-2.el6.x86_64
fontconfig-devel-2.8.0-3.el6.x86_64
libXfont-1.4.1-2.el6_1.x86_64
ghostscript-fonts-5.50-23.1.el6.noarch
xorg-x11-font-utils-7.2-11.el6.x86_64
urw-fonts-2.4-10.el6.noarch

[vitallium]

vitaliy....@gmail.com commented:

Did you still need instructions? :)

[erikdubbelboer]

e...@dubbelboer.com commented:

That's all? You just need to have those packages installed when compiling and running?

[rvetere]

remo.vet...@gmail.com commented:

I'm facing the same problem on my EC2 server with Ubuntu 12.04.1 LTS with a custom built phantomjs 1.7.1 - .woff fonts are not working.

I'm wondering now which packages i have to install on ubuntu to achiev this - but i tried to work through the list of these said packages, but i was not able to find all for ubuntu... and beside these package-installations - how can we activate the .woff support in phantomjs 1.7?

[vitallium]

vitaliy....@gmail.com commented:

There is the only way to enable .woff file support in PhantomJS - you
will need to apply one patch and compile PhantomJS from source code.
I'll write instruction later.

[vitallium]

vitaliy....@gmail.com commented:

Instructions:

1. Checkout PhantomJS 1.7 version as described in the official instruction: http://phantomjs.org/build.html
2. Add the remote repo which contains the needed branch:
   git remote add vital https://github.com/Vitallium/phantomjs.git
   git fetch vital
3. Switch to the branch with WOFF file support:
   git checkout -b Enable-WOFF-format-support vital/Enable-WOFF-format-support
4. Compile PhantomJS as usual

[ariya]

meir.cot...@gmail.com commented:

not working after this long build...