_[email protected] commented:_
Which version of PhantomJS are you using? Tip: run 'phantomjs --version'.
1.5.1 (development)
What steps will reproduce the problem?
- Using rasterize.js generate a png of https://developers.google.com/webfonts/
- 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.
:star2: 30 people had starred this issue at the time of migration.
_[email protected] 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
_[email protected] 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.
_[email protected] commented:_
Nope, still an issue in 1.6.1
_[email protected] commented:_
Is there progress on this issue?
_[email protected] commented:_
Nils, if there is no update posted to this issue, it means there is no progress. Your question has an obvious answer.
_[email protected] 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.
_[email protected] commented:_
[email protected], 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?
_[email protected] 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.
_[email protected] 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
_[email protected] commented:_
Did you still need instructions? :)
_[email protected] commented:_
That's all? You just need to have those packages installed when compiling and running?
_[email protected] 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?
_[email protected] 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.
_[email protected] 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
_[email protected] commented:_
not working after this long build...
_[email protected] commented:_
Could you provide me a link?
_[email protected] 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/webfontsHowever, this url will render the font (since the web font appears to be loaded before DOM Load):
https://developers.google.com/webfonts/
_[email protected] 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
_[email protected] 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.).
_[email protected] commented:_
Oh, thanks! It's reproducible only on Linux. I'll see what can I do.
_[email protected] 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
_[email protected] 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.
_[email protected] 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!
_[email protected] 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).
_[email protected] commented:_
Enable WOFF file support. Background: WOFF format requires that WebKit should be compiled with zlib.
https://github.com/ariya/phantomjs/commit/04b74f99fd
_Metadata Updates_
_[email protected] commented:_
Reopen. Apparently it does not work yet.
_Metadata Updates_
_[email protected] commented:_
Thanks for your continued work on this issue. (And for the awesome product that is PhantomJS!)
_[email protected] commented:_
This issue is almost fixed. I'll finish it on this weekend.
_[email protected] commented:_
Rendering of web fonts does not work for me with 1.8.1 (FreeBSD port), even https://developers.google.com/webfonts/ renders with fallback (system) fonts.
_[email protected] commented:_
You need to compile PhantomJS with fontconfig support.
Also, could you check whether fonts are loaded when the page loads? You can use page.onResourceRequested.And yes, I tested this issue only on 2 platforms: Windows and Linux.
_[email protected] commented:_
Currently, 1.8.1 version doesn't support WOFF files. Related pull request is waiting for approving - https://github.com/ariya/phantomjs/pull/392.
_[email protected] commented:_
If I rasterize phantomjs.org only the CSS file from fonts.googleapis.com is fetched, the .woff file(s) are not. Same result w/ and w/o delocal.js (with delocal.js web fonts are working except the .woff format).
_[email protected] commented:_
Regarding https://github.com/ariya/phantomjs/pull/392, I'm also a little bit scary with the big modification in WebKit's CSS stuff. Maybe let's wait a bit until we can get updated WebKit?
_[email protected] commented:_
Sure. We can delay these changes. Webkit 2.3 has been backported. This
version contains my changes for the CSS parser. Thus, only one thing is
needed: update our Webkit version to 2.3.
great news. looking forward to this.
Thanks for all your hard work on this. I was wondering if there was an estimated time for when the Webkit version would be updated? Currently using version 1.8.2 but having lots of problems with Google Fonts and the like, it seems like the issue being discussed here is the same one I am having. Be good to know if the update to Webkit 2.3 is relatively trivial or if it's going to be months away, thanks!
We're old fashioned, there's some info about WebKit update in the (surprise!) mailing-list: https://groups.google.com/forum/#!msg/phantomjs/2Zb1Ryc5y8E/O16GOb25HUoJ.
And of course: issue #10031.
WOFF rendering still not works with latest PhantomJS (1.9) + Qt (4.8.4_2) under FreeBSD.
Is there any chance, that it will work with PhantomJS 2.0 with 5.x Qt?
This is a great project! I am having issues rendering Google webfonts even when using @Vitallium branch and re-compiling the project.
I am running an EC2 Linux server, when I run PhantomJS and load a page for the first time the webfonts on it seem to be rendered correctly. If I then load another page with different webfonts, the original fonts from the first page are used instead. The correct webfonts will only be shown when PhantomJS is restarted.
Is this an issue anyone else has had and is there a solution? Thanks
Am I correct in assuming this might be fixed in 2.0 (which seems about ~3 months away), or has there been anyone succeeded in getting webfont rendering to work w/ typekit or similar services? I'm at the point where it's working with google fonts, but nothing else regarding third party webfont providers - which is 95% of what I am trying to achieve, but this has me stumped.
I got TypeKit working with rasterize.js with following additions with Phantomjs 1.9.1 build from the site.
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.0; WOW64) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7';
page.customHeaders = {'Referer': address};
Google fonts are not working though since it serves me woff fonts. I guess by fiddling user agent string I could get google to serve me truetype fonts.
FY, @MattiJarvinen's solution also worked for me with typekit fonts. Thx.
No updates on this?
I can confirm this is still an issue
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<style>
@font-face {
font-family: "font declaration here because phantomjs has a bug that prevent to use the first declared font";
}
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 29, 2014 */
@font-face {
font-family: 'aguafina_scriptregular';
src: url('/assets/aguafinascript-regular-webfont.eot');
src: url('/assets/aguafinascript-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/aguafinascript-regular-webfont.ttf') format('truetype'),
url('/assets/aguafinascript-regular-webfont.svg#aguafina_scriptregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: "aguafina_scriptregular";
font-weight:normal;
font-size:3em;
}
</style>
</head>
<body>
Where did my font go?
</body>
HTML Screenshot
PDF Screenshot
I am having the same issue too with WOFF font files.
I ended up using Arunoda Susiripala's build of phantomjs that supports webfonts: http://arunoda.me/blog/phantomjs-webfonts-build.html
Works great so far.
@font-face {
font-family: 'PT Sans Narrow';
src: url('PT_Sans_Narrow.svg') format('svg');
}
This seems to work.
I also ended up using Arunoda's build for @font-face
support.
Would be nice to have font-face support, since it makes testing easier when your product uses icon fonts and custom fonts.
@font-face {
font-family: 'PT Sans Narrow';
src: url('PT_Sans_Narrow.svg') format('svg');
}
This seems to work.
Seems to be not..
Hi,
Just wanted to share the libs installed on Ubuntu 13.10 to successfully compile and run vitaly 'WOFF' branch merged in today master.
apt-get install fontconfig libfontconfig-dev libfontenc-dev libfontenc1 libxfont-dev libxfont1 xfonts-base xfonts-100dpi xfonts-75dpi xfonts-cyrillic ttf-mscorefonts-installer libxext-dev libwayland-dev
In case of trouble, check that FontConfig is really enabled (no broken deps) in the build log.
Is this fixed in some version of PhantomJS? I tried changing user agent and a dummy first @font-face
, didn't seem to work.
This is still an issue for me.
Been battling this issue myself recently. I'm running version 1.9.7. For me, using SVG fonts works fine, like so:
@font-face {
font-family: 'Font A';
src: url('font_a.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Font B';
src: url('font_b.svg') format('svg');
font-weight: normal;
font-style: normal;
}
However, SVG fonts aren't ideal since they don't convert into selectable text in a PDF document. This problem does not exist when using TIFF or WOFF formats, however, it seems that PhantomJS will not render multiple fonts when using those formats—only one of the two work, at least in my situation.
I'm trying to render a Twitter page (which uses icons from a font loaded with font-face) with Phantomjs 1.9.7 but the icons do not show up.
Expetting
getting
Still not working.
I too am trying to get some custom fonts to work as well. Does anyone know whether .otf files are supported? I'm on OSX and using 1.9.7.
@font-face {
font-family: DinPro-Regular;
src: url('fonts/DINPro-Regular.otf');
}
@font-face {
font-family: DinPro-Medium;
src: url('fonts/DINPro-Medium.otf');
}
We use this special build: http://arunoda.me/blog/phantomjs-webfonts-build.html
It is based on phantom v1.9. and it works well with web fonts.
Is this bug still affecting PhantomJS?
To me, yes
It's definitely still an issue. What's strange is the issue is non-deterministic. If I render a page 50 times, roughly half will be correct.
looks like there is some improvement in 2.0
Yep, error still exists for us. Would be great to see this fixed in 2.0.
If anyone gets a build working please share the SHA and git url for me to
clone and build. Even better, would be a Ubuntu .deb for phantomjs 2.0.
On Mon, Aug 4, 2014 at 10:59 AM, Markus Padourek [email protected]
wrote:
Yep, error still exists for us. Would be great to see this fixed in 2.0.
—
Reply to this email directly or view it on GitHub
https://github.com/ariya/phantomjs/issues/10592#issuecomment-51071222.
Can an admin please merge in the changes in the "Enable-WOFF-format-support vital/Enable-WOFF-format-support" git-branch? This shouldnt be an open issue given we have a fix. I'm still experiencing the bug
I ended up using this build as well: http://arunoda.me/blog/phantomjs-webfonts-build.html
Typekit works. Google Fonts work. HOWEVER...fonts hosted on the same server as the site don't work
I hear that fonts have been improved in version 2. Let's hope it's true.
I too ended up using build provided by @floriansemm
http://arunoda.me/blog/phantomjs-webfonts-build.html
it's 1.9.0 dev build. Worked perfectly for google web fonts.
I was using that arunoda build too. But it was dodgy -- fonts were rendering oddly under Linux where they looked fine under OS X. So I finally cracked and waited the two hours or so for phantomjs 2 master to build. It built without a hitch and the fonts look perfect.
I'd recommend anyone hitting this issue to do the same.
I could upload a binary if I'm allowed (I've no idea about any legal issues) if that would be any help to anyone. (Built on Ubuntu 14.04.1, x86_64)
+1 for a binary upload
Here you go: https://jumpshare.com/b/dfUBgYAdsmdFJ6s4ZPkq (I haven't used this service before -- if it sucks suggest something else and I'll upload it again.)
As said above, this is current (at time of writing) master branch, no modifications, built on Ubuntu 14.04.1 x86_64. Works for me, but no guarantees.
Arunoda build on Linux:
2.0-dev build on Linux:
@tremby Brilliant. Thanks boss.
I got webfonts working correctly with the 2.0 binaries from @bprodoehl.
Including own hosted fonts.
Built Phantomjs 2 on amazon ami ec2. Still having issues with web fonts and also some of the normal fonts.
For: http://www.imtcdl.ac.in/
Expected:
Getting:
rpm -qa | grep font
at the time of build
fontconfig-2.8.0-5.7.amzn1.i686
fontpackages-filesystem-1.41-1.1.2.amzn1.noarch
libfontenc-1.0.5-2.6.amzn1.i686
dejavu-serif-fonts-2.33-6.6.amzn1.noarch
xorg-x11-font-utils-7.2-11.5.amzn1.i686
libXfont-1.4.5-3.9.amzn1.i686
xorg-x11-fonts-Type1-7.2-9.1.5.amzn1.noarch
fontconfig-devel-2.8.0-5.7.amzn1.i686
dejavu-fonts-common-2.33-6.6.amzn1.noarch
dejavu-sans-fonts-2.33-6.6.amzn1.noarch
The build was from a master ~48 hours before the time of this post.
Has Vitallium's fix been pulled in the master?
I just tried compiling newest 2.0.0 (development) by following these instructions: https://github.com/ariya/phantomjs/wiki/PhantomJS-2 on empty vagrant machine running Debian/Wheezy and i can confirm Google fonts are now rendering perfectly! Even custom fonts and icon fonts render perfect. In general fonts are rendering way better than previous woff...-fix branch.
Don't forget to install recommended ttf-mscorefonts-installer
package too. I guess it gives you good backup fonts too. Here i found a instructions how to install this package on Debian like distros: http://installion.co.uk/debian/wheezy/contrib/t/ttf-mscorefonts-installer/en/install/index.html
Here is the page with lot of custom fonts and icon fonts in footer: http://finalboard.com
And here is result: https://cloud.githubusercontent.com/assets/445304/5234439/db90f41c-77d4-11e4-9d24-ba44a0fffb95.png
Thank you so much all the contributors.
Fixed in master.
@Vitallium - I've compiled master (using build.cmd for windows) and am still encountering issues loading woff files. Am I missing something?
@malhotrar make sure you compiled it with zlib support.
@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?
@malhotrar QtWebkit has its own system to detect if zlib library is available.
@Vitallium - so what do I do? Anything special i need to install on windows to compile with zlib?
@malhotrar as far as I remember, you don't. But let me check it.
@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?
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.
@malhotrar found. There is a problem in build.cmd
. It doesn't append INCLUDE
and LIB
dirs for zlib.
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%
@malhotrar to compile PhantomJS on Windows with zlib support, do following:
cd src\qt\qtwebkit
and execute git clean -dxfq .
). This is required and most important step to re-configure Webkit.build.cmd
as usual@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'
@Vitallium - renaming zlib.lib to z.lib fixes the issue above.
Does anyone have a compiled build for ubuntu 14?
@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.
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.
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/
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
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.
In some cases need to install Linux version of Arial, Sanserif fonts
yum install liberation-sans-fonts.noarch
@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 :+1:
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.
Most helpful comment
_[email protected] commented:_