9

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?

1 Answers1

13

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.

  • 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. –  Mar 07 '14 at 11:52
  • 1
    I ended up using a script that acts as a proxy to Google's CSS files that removes the local tags using regular expression. – Roel van Duijnhoven Apr 22 '14 at 07:44
  • 2
    Doesn't work for me with phantomjs 1.9.7 on OSX. It does work with the custom WOFF web font support build though: http://arunoda.me/blog/phantomjs-webfonts-build.html – d4n3 Sep 18 '14 at 14:14
  • 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. :/ –  Sep 19 '14 at 09:41
  • I haven't had any luck with this so far :/ It is pretty frustrating – st.derrick Aug 17 '15 at 20:36
  • You did exactly as described and on a windows machine? Also what version are you using? –  Aug 20 '15 at 16:24