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

[vitallium]

vitaliy....@gmail.com commented:

Could you provide me a link?

[atheken]

atheken@gmail.com commented:

I built the WOFF-enabled branch on OS X 1.8.2 just now.

Fonts render as expected.

I think it's important to make sure that you try to rasterize a page that is NOT lazily loading fonts after DOM Load:

For example, this will not render the fonts with rasterize.js:
http://www.google.com/webfonts

However, this url will render the font (since the web font appears to be loaded before DOM Load):
https://developers.google.com/webfonts/

[ariya]

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

Here is a test with 'Open Sans' font:
This is the original page: http://www.google.com/webfonts/specimen/Open+Sans
This is the capture http://dobrx2zp5pxii.cloudfront.net/captures/gtGWb3qdola3ARJDWR2i.jpg

[atheken]

atheken@gmail.com commented:

Please read my previous comment, use rasterize.js with the second link I referenced.

It is not clear whether the issue is with the font, or the way it is being loaded, if you follow my instructions from my previous comment, we can confirm whether your build is broken (rather than vagaries with the font or the event firing, etc.).

[vitallium]

vitaliy....@gmail.com commented:

Oh, thanks! It's reproducible only on Linux. I'll see what can I do.

[vitallium]

vitaliy....@gmail.com commented:

Related issues:
http://code.google.com/p/phantomjs/issues/detail?id=713
http://code.google.com/p/phantomjs/issues/detail?id=247

[rvetere]

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

Thank you so much vitaliy!! I made a complete start-over, i deleted first my old "phantomjs" directory, checked it out again and changed to your branch with WOFF-Support... after a complete re-build over the whole day now (my EC2 is only a "Small") - it is working now perfectly!! :D

[vitallium]

vitaliy....@gmail.com commented:

Ok, I've updated my branch (https://github.com/Vitallium/phantomjs/tree/Enable-WOFF-format-support). This page http://www.google.com/webfonts/specimen/Open+Sans should rendered fine now.

[ariya]

treyto...@gmail.com commented:

just finish build on Ubuntu 10.04.1 LTS with Vitali's WOFF-enabled branch.
There was a minor glitch:
in ../../WebCore/platform/graphics/qt/FontCustomPlatformDataQt.cpp
WTF::Ref PtrWebCore::SharedBuffer sfntBuffer
was declared twice, so commenting out the 2nd declaration solved that.
Somehow I don't understand atheken's comment:
"Please read my previous comment, use rasterize.js with the second link I referenced"
but my page now renders the fonts correctly, so no complaints here.
Big Thanks to Vitaly for sharing his WOFF-aware branch here.
Cheers all!

[ariya]

treyto...@gmail.com commented:

oops, forgot to mention in previous post: as someone mentioned before, you need to make available the fonts rendered on your system - in other words you need total control of the web content, otherwise this does not seem to work as you want (but great for control freaks like me ... hehe).

[ariya]

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

Enable WOFF file support. Background: WOFF format requires that WebKit should be compiled with zlib.
04b74f99fd

 
Metadata Updates

• Label(s) removed:
  • Type-Defect
• Label(s) added:
  • Type-Enhancement
  • Component-Logic
  • Module-WebPage
  • Domain-WebKit
• Milestone updated: Release1.8 (was: ---)
• Status updated: Fixed

[ariya]

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

Reopen. Apparently it does not work yet.

 
Metadata Updates

• Milestone updated: Release1.9 (was: Release1.8)
• Status updated: Accepted

[vitallium]

vitaliy....@gmail.com commented:

 

 
Metadata Updates

• Owner updated: vitaliy....@gmail.com

[atheken]

atheken@gmail.com commented:

Thanks for your continued work on this issue. (And for the awesome product that is PhantomJS!)

[vitallium]

vitaliy....@gmail.com commented:

This issue is almost fixed. I'll finish it on this weekend.

[malhotrar]

@vitallium - I've compiled master (using build.cmd for windows) and am still encountering issues loading woff files. Am I missing something?

[vitallium]

@malhotrar make sure you compiled it with zlib support.

[malhotrar]

@vitallium - in preconfig.cmd, I see 'set QT_CONFIG=!QT_CONFIG! -qt-zlib', isn't that what I need or Is there something specific I need to do?

[vitallium]

@malhotrar QtWebkit has its own system to detect if zlib library is available.

[malhotrar]

@vitallium - so what do I do? Anything special i need to install on windows to compile with zlib?

[vitallium]

@malhotrar as far as I remember, you don't. But let me check it.

[malhotrar]

@vitallium - Is there a nightly build, I could try out that would be compiled with zlib support? That way I can make sure it's not an issue with my build?

[malhotrar]

I can confirm, I am compiling with zlib (looking at the build log)

Third Party Libraries:
ZLIB support............qt

qxml.cpp
cl -c -nologo -Zm200 -Zc:wchar_t -FS -Zi -MTd -MP -W3 /Fd......\lib\Qt5Bootstrapd.pdb -DUNICODE -DWIN32 -DQT_BOOTSTRAPPED -DQT_LITE_UNICODE -DQT_NO_CAST_TO_ASCII -DQT_NO_CODECS -DQT_NO_DATASTREAM -DQT_NO_LIBRARY -DQT_NO_QOBJECT -DQT_NO_SYSTEMLOCALE -DQT_NO_THREAD -DQT_NO_UNICODETABLES -DQT_NO_USING_NAMESPACE -DQT_NO_DEPRECATED -DQT_NO_TRANSLATION -DQT_QMAKE_LOCATION="C:/dev/phantomjs/src/qt/qtbase/bin/qmake" -DQT_CRYPTOGRAPHICHASH_ONLY_SHA1 -DQT_NO_CAST_FROM_ASCII -DQT_BUILD_BOOTSTRAP_LIB -DQT_BUILDING_QT -D_CRT_SECURE_NO_WARNINGS -DQT_ASCII_CAST_WARNINGS -DQT_MOC_COMPAT -DQT_USE_QSTRINGBUILDER -DQT_DEPRECATED_WARNINGS -DQT_DISABLE_DEPRECATED_BEFORE=0x040800 -D_USE_MATH_DEFINES -DQT_NO_EXCEPTIONS -I"......\include" -I"......\include\QtCore" -I"......\include\QtXml" -I"......\include\QtCore\5.3.0" -I"......\include\QtCore\5.3.0\QtCore" -I"C:\dev\phantomjs\src\qt\qtbase\include\QtXml\5.3.0" -I"C:\dev\phantomjs\src\qt\qtbase\include\QtXml\5.3.0\QtXml" -I"tmp" -I"....\3rdparty\zlib" -I"......\mkspecs\win32-msvc2013" -Fo.obj\debug\ @C:/Users/RMALHO~1/AppData/Local/Temp\nmE678.tmp
adler32.c
compress.c
crc32.c
deflate.c
gzclose.c
gzlib.c
gzread.c
gzwrite.c
infback.c
inffast.c
inflate.c
inftrees.c
trees.c
uncompr.c
zutil.c

and so on.

[vitallium]

@malhotrar found. There is a problem in build.cmd. It doesn't append INCLUDE and LIB dirs for zlib.

[malhotrar]

All I should is add the following?:

:: zlib
set ZLIB_DIR=!_3RDPARTY!\zlib
set ZLIB_LIB=!ZLIB_DIR!\lib
set ZLIB_INCLUDE=!ZLIB_DIR!\include

:: sqlite
set SQLITE3SRCDIR=!ROOT_DIR!\src\qt\qtbase\src\3rdparty\sqlite

set LIB=!OPENSSL_LIB!;!ICU_LIB!;!LIBXML_LIB!;!ZLIB_LIB!;%LIB%
set INCLUDE=!OPENSSL_INCLUDE!;!ICU_INCLUDE!;!LIBXML_INCLUDE!;!ZLIB_INCLUDE!;%INCLUDE%
set PATH=!_3RDPARTY!\gnuwin32\bin;%PATH%

[vitallium]

@malhotrar to compile PhantomJS on Windows with zlib support, do following:

• make sure your Webkit dir is clean (cd src\qt\qtwebkit and execute git clean -dxfq .). This is required and most important step to re-configure Webkit.
• download and apply this patch to enable zlib in QtWebkit - https://gist.github.com/Vitallium/a6098ac4b411eb4adbd4
• run build.cmd as usual

[malhotrar]

@vitallium - hitting "LINK : fatal error LNK1181: cannot open input file 'z.lib'"

"C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\BIN\nmake.exe" -f Makefile.Release
link /NOLOGO /DYNAMICBASE /NXCOMPAT /INCREMENTAL:NO /SUBSYSTEM:CONSOLE "/MANIFESTDEPENDENCY:type='win32' name='Microsoft.Windows.Common-Controls' version='6.0.0.0' publicKeyToken='6595b64144ccf1df' language='*' processorArchitecture='*'" /MANIFEST /MANIFESTFILE:..\bin\phantomjs.exe.embed.manifest /OUT:..\bin\phantomjs.exe @C:\Users\RMALHO~1\AppData\Local\Temp\nmC758.tmp

LINK : fatal error LNK1181: cannot open input file 'z.lib'

[malhotrar]

@vitallium - renaming zlib.lib to z.lib fixes the issue above.

[sosso]

Does anyone have a compiled build for ubuntu 14?

[bprodoehl]

@sosso I posted some 2.0 pre-release binaries here: https://github.com/bprodoehl/phantomjs/releases

I didn't expect the static builds for Linux to take this long, so I'll post some 2.0.0 release binaries for Ubuntu there tonight.

[sosso]

Awesome. These have the web font support? I have a working 2.0 binary but our designer doesn't think the web font support was enabled on the build that I obtained.

[bprodoehl]

I posted some new Ubuntu 14.04 and 15.04 binaries here:

https://github.com/bprodoehl/phantomjs/releases/tag/v2.0.0-20150528

Web fonts look just fine using the rasterize example on a couple internal sites, and http://thisweeksplaylist.co/

[sosso]

Nice, that's a definite improvement.

Source: http://crowdfunding-projects.findthedata.com/w/a1XMTxO8hdX
Phantomed: https://s3.amazonaws.com/uploads.hipchat.com/21163/408327/dexjshNiINoMQvz/upload.png

[derrick-branch]

UPDATE: for additional context, I'm using the library webshot.

Could someone comment on usage? Sorry to bother. I cannot get this working for the life of me.

Running 2.0.0 on Yosemite, installed view Homebrew. Absolutely beautiful product. Everything is working except Google fonts.

<link href='https://fonts.googleapis.com/css?family=Open+Sans:700,300' rel='stylesheet' type='text/css'>
<style>
.bold {
    font-family: 'Open Sans', Helvetica, serif;
    font-weight: 700;
}
</style>

I've been unable to get render to use Open Sans. I've tried various other methods of importing the font, using @font-face, etc. and I haven't had success yet. I have a user-agent string specified, and I believe I'm correctly setting the referer header as well (oddly, and perhaps inaccurately, someone mentioned that this was needed for Google fonts to render).

Can someone post a working code snippet? Sorry again for such a basic question.

[evgenosiptsov]

In some cases need to install Linux version of Arial, Sanserif fonts
yum install liberation-sans-fonts.noarch

[dbashyal]

@evgenosiptsov thx for that. I was getting boxes instead of text in pdf. Now it's rendering text but quite large ones compare to on my windows and other linux boxes. Atleast, this is better than dark boxes 👍

[db-add2]

Short (bad) workaround:
casper.userAgent('Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5') this UA forces google to load ttf instead of woff files.