How can I use google web fonts with phantomjs

phantomjs webfonts
alexrogers picture alexrogers · May 1, 2014 · Viewed 9k times · Source

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?

Answer

Kousha picture Kousha · Feb 10, 2016

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.

Related questions

Is there a way to use PhantomJS in Python?

I want to use PhantomJS in Python. I googled this problem but couldn't find proper solutions. I find os.popen() may be a good choice. But I couldn't pass some arguments to it. Using subprocess.Popen() may be a proper …

Read More
phantomjs not waiting for "full" page load

I'm using PhantomJS v1.4.1 to load some web pages. I don't have access to their server-side, I just getting links pointing to them. I'm using obsolete version of Phantom because I need to support Adobe Flash on that web pages. …

Read More
How can I setup & run PhantomJS on Ubuntu?

I set up PhantomJS and recorded it to video: https://www.dailymotion.com/video/xnizmh_1_webcam Build instructions: http://phantomjs.org/build.html Is there anything wrong in my setup? After I set it up I read the quick start …

Read More