Phantomjs: Embedded fonts not rendered

[ariya]

_[email protected] commented:_

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

1.3.0

What steps will reproduce the problem?

1. phantomjs --load-plugins=yes rasterize.js http://www.nodecloud.org nodecloud.png
2. phantomjs --load-plugins=yes rasterize.js http://vowsjs.org vowsjs.png

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

Embedded fonts (@font-face CSS property) should be rendered, but system fonts are rendered instead.

Which operating system are you using?

Linux

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

Compiled it from source.

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 #247.
:star2:   21 people had starred this issue at the time of migration.

[ariya]

_[email protected] commented:_

Upstream bug: https://bugs.webkit.org/show_bug.cgi?id=36351

[aportale]

_alessandro.[email protected] commented:_

This really seems to depend on how the css-font is defined.The webkit bug report points out the Qt has an issue if a "local" src is defined for @font-face.

In other cases, ttf web fonts work well in Qt. This is a working example:
phantomjs rasterize.js http://craigmod.com/journal/font-face/ webfonts.png

[axefrog]

_[email protected] commented:_

Default standard (dynamic) windows build - 1.3 - also has this problem. For testing, render the page at https://typekit.com.

[wesbos]

_[email protected] commented:_

I can confirm this on OSX as well

[iwootten]

Is there a way around this or are we left at the whim of when changes are made to Qt itself?

[ariya]

_[email protected] commented:_

I have found a few approaches which improve the performance of web
fonts on phantom:

1) CSS must be defined in the target HTML page
External CSS style sheets appear to be loaded appropriately
however they rarely get applied to the resulting content. Defining the
font-face settings in the HTML head helps

2) remove any "local" definitions for the font-faces

3) SVG font files worked best for me

Obviously these steps only help of you control the content. Or if you
can write some pre-processing code to make the changes you need before
rendering.

On Feb 17, 2012, at 6:58 PM, "[email protected]"
[email protected] wrote:

[sparecycles]

_adam.[email protected] commented:_

Tracing statements reveal that (on OSX 10.6.8) ATSFontActivateFromMemory succeeds on the typekit fonts. I suspect that the problem might be that the use of QFont to find them after insertion into the font library is failing because they seem to lack family names.

[ariya]

_[email protected] commented:_

I built a test case with some fonts that work and some that do not.

http://dev.increment.org/fonts/

The problem appears to be only with some opentype fonts. All fonts on the test page work in Chrome, Firefox and Safari. All except for the first OTF work in PhantomJS.

The first font I have was pulled out of typekit as otf and converted to ttf. The second was a free ttf from the web that I converted to otf.

[sparecycles]

_adam.[email protected] commented:_

I believe that when Qt5 rolls out this should be fixed on Webkit trunk.
See my comments here:

http://code.google.com/p/phantomjs/issues/detail?id=488

[vitallium]

_[email protected] commented:_

 

 
_Metadata Updates_

• Owner updated: [email protected]

[vitallium]

_[email protected] commented:_

 

 
_Metadata Updates_

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

[131]

I found out, trying to use different font face on the same page, that the first "declared" font is broken, and fonts declared after are working fine (so i use a dummy @font-face { font-family: "placeholder" ) and all other fonts after.

[blaise-io]

@131 Can you show a complete example? On Linux? Didn't work for me with a woff font.

SVG fonts work fine by the way.

[131]

@font-face {
font-family: "font declaration here because phantomjs has a bug that prevent to use the first declared font";
}
@font-face {
font-family: barcode;
src: url('fonts/c39hrp48dhtt.ttf');
}
@font-face {
font-family: arialuni;
src: url('fonts/arialuni.ttf');
}

(on linux yes, but w/ same issue under windows)

[zackw]

Unfortunately, this seems still to be a problem with PhantomJS 2.0, per the test case at http://dev.increment.org/fonts/ (thanks for keeping that around!) Note that both of the desktop browsers I screenshotted below were running on OSX, whereas PhantomJS was running on Linux. This is almost certainly either a Webkit core issue, or a platform-font-library issue.

PhantomJS

Safari

Firefox

[theaspect]

Looks like workaround is to put fonts locally like http://chapter31.com/2012/09/24/installing-new-fonts-on-ubuntu-server/

[vitallium]

Fixed in 2.5.

[holic]

@Vitallium That's great news! Thanks for all your work!

Where was this fixed? Is it possible to run the latest code with this fix prior to release? And when is 2.5 slated for release?

[vitallium]

@holic yes, beta binaries available on the same page as release: https://bitbucket.org/ariya/phantomjs/downloads

[vzqzac]

I'm still having the issue with 2.5 but maybe I'm doing something wrong, could anyone relate?

[olegsfinest]

I am also still having the same problem. Using fonts defined in @font-face that i have locally on the (linux-)server that should be rendered into the pdf are not beeing used.