Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web Fonts do not render, use fallback fonts instead. #10592

Closed
atheken opened this issue Jun 15, 2012 · 100 comments
Closed

Web Fonts do not render, use fallback fonts instead. #10592

atheken opened this issue Jun 15, 2012 · 100 comments
Assignees

Comments

@atheken
Copy link

atheken commented Jun 15, 2012

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
Copy link
Author

atheken commented Jun 30, 2012

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
Copy link

plehoux commented Aug 9, 2012

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
Copy link
Author

atheken commented Aug 9, 2012

atheken@gmail.com commented:

Nope, still an issue in 1.6.1

@ariya
Copy link
Owner

ariya commented Oct 23, 2012

n...@visual.ly commented:

Is there progress on this issue?

@ariya
Copy link
Owner

ariya commented Oct 24, 2012

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
Copy link
Collaborator

vitallium commented Nov 17, 2012

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
Copy link

dmitrykh commented Dec 4, 2012

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
Copy link
Contributor

erikdubbelboer commented Dec 4, 2012

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
Copy link

dmitrykh commented Dec 4, 2012

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
Copy link
Collaborator

vitallium commented Dec 4, 2012

vitaliy....@gmail.com commented:

Did you still need instructions? :)

@erikdubbelboer
Copy link
Contributor

erikdubbelboer commented Dec 4, 2012

e...@dubbelboer.com commented:

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

@rvetere
Copy link

rvetere commented Dec 4, 2012

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
Copy link
Collaborator

vitallium commented Dec 4, 2012

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
Copy link
Collaborator

vitallium commented Dec 5, 2012

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
Copy link
Owner

ariya commented Dec 5, 2012

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

not working after this long build...

@vitallium
Copy link
Collaborator

vitallium commented Dec 5, 2012

vitaliy....@gmail.com commented:

Could you provide me a link?

@atheken
Copy link
Author

atheken commented Dec 5, 2012

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
Copy link
Owner

ariya commented Dec 5, 2012

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
Copy link
Author

atheken commented Dec 5, 2012

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
Copy link
Collaborator

vitallium commented Dec 5, 2012

vitaliy....@gmail.com commented:

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

@vitallium
Copy link
Collaborator

vitallium commented Dec 6, 2012

@rvetere
Copy link

rvetere commented Dec 6, 2012

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
Copy link
Collaborator

vitallium commented Dec 6, 2012

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
Copy link
Owner

ariya commented Dec 14, 2012

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
Copy link
Owner

ariya commented Dec 14, 2012

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
Copy link
Owner

ariya commented Dec 19, 2012

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
Copy link
Owner

ariya commented Dec 23, 2012

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
Copy link
Collaborator

vitallium commented Jan 18, 2013

vitaliy....@gmail.com commented:

 

 
Metadata Updates

@atheken
Copy link
Author

atheken commented Jan 18, 2013

atheken@gmail.com commented:

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

@vitallium
Copy link
Collaborator

vitallium commented Jan 18, 2013

vitaliy....@gmail.com commented:

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

@malhotrar
Copy link

malhotrar commented May 22, 2015

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

@vitallium
Copy link
Collaborator

vitallium commented May 22, 2015

@malhotrar make sure you compiled it with zlib support.

@malhotrar
Copy link

malhotrar commented May 22, 2015

@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
Copy link
Collaborator

vitallium commented May 22, 2015

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

@malhotrar
Copy link

malhotrar commented May 22, 2015

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

@vitallium
Copy link
Collaborator

vitallium commented May 22, 2015

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

@malhotrar
Copy link

malhotrar commented May 22, 2015

@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
Copy link

malhotrar commented May 22, 2015

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
Copy link
Collaborator

vitallium commented May 22, 2015

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

@malhotrar
Copy link

malhotrar commented May 22, 2015

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
Copy link
Collaborator

vitallium commented May 22, 2015

@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
Copy link

malhotrar commented May 22, 2015

@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
Copy link

malhotrar commented May 22, 2015

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

@sosso
Copy link

sosso commented May 28, 2015

Does anyone have a compiled build for ubuntu 14?

@bprodoehl
Copy link

bprodoehl commented May 28, 2015

@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
Copy link

sosso commented May 28, 2015

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
Copy link

bprodoehl commented May 28, 2015

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
Copy link

sosso commented May 28, 2015

@derrick-branch
Copy link

derrick-branch commented Aug 17, 2015

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
Copy link

evgenosiptsov commented Jul 13, 2016

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

@dbashyal
Copy link

dbashyal commented Feb 1, 2017

@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
Copy link

db-add2 commented May 9, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests