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?
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.