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

This comment has been minimized.

Copy link
Author

@atheken 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

This comment has been minimized.

Copy link

@plehoux 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

This comment has been minimized.

Copy link
Author

@atheken atheken commented Aug 9, 2012

atheken@gmail.com commented:

Nope, still an issue in 1.6.1

@ariya

This comment has been minimized.

Copy link
Owner

@ariya ariya commented Oct 23, 2012

n...@visual.ly commented:

Is there progress on this issue?

@ariya

This comment has been minimized.

Copy link
Owner

@ariya 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

This comment has been minimized.

Copy link
Collaborator

@vitallium 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

This comment has been minimized.

Copy link

@dmitrykh 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

This comment has been minimized.

Copy link
Contributor

@erikdubbelboer 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

This comment has been minimized.

Copy link

@dmitrykh 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

This comment has been minimized.

Copy link
Collaborator

@vitallium vitallium commented Dec 4, 2012

vitaliy....@gmail.com commented:

Did you still need instructions? :)

@erikdubbelboer

This comment has been minimized.

Copy link
Contributor

@erikdubbelboer 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

This comment has been minimized.

Copy link

@rvetere 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

This comment has been minimized.

Copy link
Collaborator

@vitallium 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

This comment has been minimized.

Copy link
Collaborator

@vitallium 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

This comment has been minimized.

Copy link
Owner

@ariya ariya commented Dec 5, 2012

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

not working after this long build...

@vitallium

This comment has been minimized.

Copy link
Collaborator

@vitallium vitallium commented Dec 5, 2012

vitaliy....@gmail.com commented:

Could you provide me a link?

@atheken

This comment has been minimized.

Copy link
Author

@atheken 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

This comment has been minimized.

Copy link
Owner

@ariya 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

This comment has been minimized.

Copy link
Author

@atheken 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

This comment has been minimized.

Copy link
Collaborator

@vitallium 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

This comment has been minimized.

@rvetere

This comment has been minimized.

Copy link

@rvetere 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

This comment has been minimized.

Copy link
Collaborator

@vitallium vitallium commented Dec 6, 2012

@ariya

This comment has been minimized.

Copy link
Owner

@ariya 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

This comment has been minimized.

Copy link
Owner

@ariya 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

This comment has been minimized.

Copy link
Owner

@ariya 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.
04b74f9

 
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

This comment has been minimized.

Copy link
Owner

@ariya 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

This comment has been minimized.

Copy link
Collaborator

@vitallium vitallium commented Jan 18, 2013

vitaliy....@gmail.com commented:

 

 
Metadata Updates

@atheken

This comment has been minimized.

Copy link
Author

@atheken 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

This comment has been minimized.

Copy link
Collaborator

@vitallium vitallium commented Jan 18, 2013

vitaliy....@gmail.com commented:

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

@malhotrar

This comment has been minimized.

Copy link

@malhotrar 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

This comment has been minimized.

Copy link
Collaborator

@vitallium vitallium commented May 22, 2015

@malhotrar make sure you compiled it with zlib support.

@malhotrar

This comment has been minimized.

Copy link

@malhotrar 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

This comment has been minimized.

Copy link
Collaborator

@vitallium vitallium commented May 22, 2015

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

@malhotrar

This comment has been minimized.

Copy link

@malhotrar malhotrar commented May 22, 2015

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

@vitallium

This comment has been minimized.

Copy link
Collaborator

@vitallium vitallium commented May 22, 2015

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

@malhotrar

This comment has been minimized.

Copy link

@malhotrar 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

This comment has been minimized.

Copy link

@malhotrar 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

This comment has been minimized.

Copy link
Collaborator

@vitallium 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

This comment has been minimized.

Copy link

@malhotrar 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

This comment has been minimized.

Copy link
Collaborator

@vitallium 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

This comment has been minimized.

Copy link

@malhotrar 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

This comment has been minimized.

Copy link

@malhotrar malhotrar commented May 22, 2015

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

@sosso

This comment has been minimized.

Copy link

@sosso sosso commented May 28, 2015

Does anyone have a compiled build for ubuntu 14?

@bprodoehl

This comment has been minimized.

Copy link

@bprodoehl 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

This comment has been minimized.

Copy link

@sosso 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

This comment has been minimized.

Copy link

@bprodoehl 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

This comment has been minimized.

@derrick-branch

This comment has been minimized.

Copy link

@derrick-branch 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

This comment has been minimized.

Copy link

@evgenosiptsov evgenosiptsov commented Jul 13, 2016

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

@dbashyal

This comment has been minimized.

Copy link

@dbashyal 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

This comment has been minimized.

Copy link

@db-add2 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.