How can I use google web fonts with phantomjs

问题:

I'm using phantomjs version 1.9.7 which I believe is supposed to support web fonts. I have inserted the font with google web fonts however it is just displaying my fallback font when I automate a screengrab. The webfont is displaying fine in all my browsers. Are there any workarounds for this?

回答1:

I have struggled with this issue for several hours. Well, there is a simple reason for this controversy: user-agent!

Some services such as Google Fonts are returning different CSS content based on user-agent. When you call a webpage which includes Google Fonts with default PhantomJs user-agent, Google would return TTF version which is supported in PhantomJs.

However, if you set a custom user agent (Chrome, FF, etc.), Google Fonts would return .woff2 version. .woff2 is not supported in PhantomJs 2.x. Obviously, fonts are not going to be loaded.

So, for users who are testing PhantomJs without setting a generic user-agent, Google Fonts is working. If they set for example Google Chrome user-agent, it does not work.

So, you have two options:

1. Avoid setting a custom user-agent if it is possible.
2. Avoid using dumb-smart font providers like Google Fonts which does not outputting all font versions in CSS and let the browser decide what it needs.

回答2:

I believe your belief is wrong :-) The 1.9.x series of Phantom is still based on the old WebKit code, which people have been reporting web font problems with all along.

The good news is that a technical preview of Phantom 2.0 is apparently about to be released; https://github.com/ariya/phantomjs/wiki/PhantomJS-2 is intended to be the best place to follow status. And, from memory, someone reported success with web fonts using it (but I may be wrong on that as a quick search of the mailing list archives didn't turn up a definitive message saying web fonts work... but they definitely should).

BTW, SlimerJS is an almost drop-in replacement, based on Firefox's Gecko engine, and does support web fonts (though some problems in corner cases, IIRC).

回答3:

I just had the same issue with PhantomJS 2.1.1. In my case I was working under a proxy that was blocking PhantomJS from loading the font from Google. After connecting to an open network it rendered correctly.

回答4:

I tried all fixes listed here to no avail, but here is a work around. Either option resolved this for me.

First Option: Install the missing web fonts on the local computer that is running PhantomJS. Most web font providers including Google allow you to easily download the fonts for local install. No change needed at the target URL.

Second: I sites I have control over, I was able to resolve by splitting up the link tags.

Change This from:

<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>

To:

<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>

I know this is not an ideal solution but either one works, It depends on if you can modify the target URL.