PhantomJS not rendering screenshots with webfonts?

Question

So I have been looking around and can't seem to find a solution on how to get PhantomJS to actually display webfonts on screenshots, can anyone tell me if there is a way to do this?

Algonkian

Answer 1

I have been testing and testing for about a week now and finally came up with the answer, know that this might also be a result of me running PhantomJS on a Windows machine. I am currently running PhantomJS v1.9.7 and have found the following solution:

Using this in my CSS file:

@font-face {
    font-family: 'Vampiro One';
    src: url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.vamp {
    font-family: "Vampiro One";
    font-size: 1.5em;
}

Instead of the Google recommended "failsafe":

@font-face {
  font-family: 'Vampiro One';
  font-style: normal;
  font-weight: 400;
  src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.vamp {
  font-family: 'Vampiro One', cursive;
  font-size: 1.5em;
}

seems to do the trick. I hope this saves someone from being as frustrated as I have been. To those who have a hard time spotting the difference, I removed the "local()" fonts to it only point to the one font I really want, as well as removing fallback fonts, I am thinking this has to do with some false positive in either PhantomJS or the WebKit engine.

Algonkian

I also tested this and verified that it does also work on 2003 Server and forward, with the exception that it can't read OTF format, which is Microsoft's own format... :P Also, it might look pixelated on servers because cleartype is disabled, just enabled cleartype and go through the configuring process and you are golden. – Algonkian

I ended up using a script that acts as a proxy to Google's CSS files that removes the local tags using regular expression. – Swore

Doesn't work for me with phantomjs 1.9.7 on OSX. It does work with the custom WOFF web font support build though: arunoda.me/blog/phantomjs-webfonts-build.html – Pluckless

Yeah, we are also getting slightly different looking fonts depending on if we are using windows or linux and some fonts plainly doesn't work on some systems. :/ – Algonkian

I haven't had any luck with this so far :/ It is pretty frustrating – Gailey

You did exactly as described and on a windows machine? Also what version are you using? – Algonkian