phantomjs + web fonts + font loader

Asked 8/12, 2015 at 18:31 Answered 10/1, 2016 at 10:53

node.js phantomjs webfonts google-webfonts webfont-loader

I'm running phantomjs within a node.js environment, and it's going well. At the moment I'm just using local fonts, but want to get google web fonts working with phantomjs.

There are various conflicting and confusing reports out there about whether and how web fonts can be made to work with phantomjs. There are articles like this that contain outdated information with dead links. And posts like this that suggest that phantomjs 2.0 will or can support web fonts, others saying that it doesn't but 2.0.1 will. In this post there is a suggestion that webfonts do work in 2.0.

I've tried lots of options, including with phantomjs 2.0 and 2.0.1 binaries, but can't get it working. It may be that I'm loading the web fonts in my js using the web font loader using something along the following:

WebFont.load({
    google: {
        families: ['Droid Sans', 'Droid Serif']
    },
    loading: function() { console.log('loading'); },
    active: function() {
        console.log('active');
        // hooray!  can do stuff...
    },
    inactive: function() { console.log('inactive'); },
    fontloading: function(familyName, fvd) { console.log('fontloading', familyName, fvd); },
    fontactive: function(familyName, fvd) { console.log('fontactive', familyName, fvd); },
    fontinactive: function(familyName, fvd) { console.log('fontinactive', familyName, fvd); }
});

But I'm always reaching the inactive branch, so the font load is never successful... even though the same code works fine in a browser (reaching the active branch.

In the font loader docs, it says:

If Web Font Loader determines that the current browser does not support @font-face, the inactive event will be triggered.

My suspicion is that web font loader is indeed determining that the browser (phantomjs) does not support this, hence always reaching inactive.

Anyone got phantomjs + web fonts + web font loader working?

Michelsen answered 8/12, 2015 at 18:31 Comment(0)

What is the UA you are using? I think Web Font Loader uses UA to detect the support. Try a UA of Chrome 46 and then see if it works.

var webPage = require('webpage');
var page = webPage.create();
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36';

Inarch answered 8/12, 2015 at 19:52 Comment(4)

Sadly, no difference :-( Tried this with phantomjs 1.9.8, 2.0.0 and 2.0.1... each time it only reaches the inactive branch – Michelsen 8/12, 2015 at 21:16

I did just try with [email protected], changing the userAgent. Logs: loading, active.. – Donation 2/1, 2016 at 17:6

Do you have any code snippets to share @cviejo? I still can't get it to the active branch... – Michelsen 8/1, 2016 at 11:33

Ouch, sorry, forgot! Will post today – Donation 8/1, 2016 at 11:38

Not to be marked as correct, just expanding on the above answer. Since all phantomjs wrappers (like phridge and phantomjs-node) basically spawn a new phantomjs process, the result should be the same when run from a nodejs context.

phatomjs-webfonts.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PhantomJS WebFontsTest</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
    WebFont.load({
        google: {
            families: ['Droid Sans', 'Droid Serif']
        },
        loading:  function(){ console.log('WebFonts loading'); },
        active:   function(){ console.log('WebFonts active'); },
        inactive: function(){ console.log('WebFonts inactive'); }
    });
</script>   
</body>
</html>

phantomjs-webfonts.js:

var page = require('webpage').create();

page.settings.userAgent = 'Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36';

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  console.log('Console: ' + msg);
};

page.open('http://<server-address>/phantomjs-webfonts.html', function(status) {
  console.log("Loading status: " + status);
});

Command:

phantomjs phantomjs-webfonts.js

Output:

Console: WebFonts loading
Console: WebFonts active
Loading status: success

Donation answered 10/1, 2016 at 10:53 Comment(3)

What version of phantomjs? $ phantomjs -v – Michelsen 12/1, 2016 at 8:41

I didn't know there was even a 1.9.19? See phantomjs.org/release-1.9.html Or are you referring to the phantomjs npm package npmjs.com/package/phantomjs which has a version of 1.9.19 at present? – Michelsen 12/1, 2016 at 13:10

Looks like it, indeed. I did my tests on my home machine, will post the right version info tonight then. – Donation 12/1, 2016 at 13:13

Recommended topics

Hot tags