PhantomJS Render Page Fonts - font-face

Question

I am using PhantomJS to take screenshots of webpages.
I have seen other posts about problems with #font-face, but the fonts on my pages are rendering correctly. The only issue I am having is that each time I take a screenshot, the fonts show slightly differently from the previous screenshot. So although they are rendering correctly, they are inconsistent in their appearance on the screenshot.
I have tried a number of fixes, most based around the assumption that it is something to do with the screenshot being taken before the page is ready, but this doesn't seem to be the issue. For example, I have delayed the screenshot being taken so that the font has time to load, and be rendered, but this doesn't solve the problem.
I have tried binding to various page events, but again, no luck.
I have attached screenshots to show the difference. The problem is, I need the rendered screenshot to be accurate in the context of what I am using it for.
As a note, I have tried CasperJS as well (knowing that it is based on PhantomJS so not expecting it to be any different).

Answer 1

Have you tired watching the DOM for font related events? You can also try taking a screenshot every X seconds, producing a moment-moment overview (note that this will produce a lot of empty and duplicate images. If that's a problem, try simply setting a min file size or checking to see if two files have the same size).
var page = require('webpage').create();
page.open("http://www.slashdot.org", function (status) {
phantom.exit();
});
var i = 0;
setInterval(function() {
i += 1;
page.render("/tmp/screenshots/screenshot-" + i + ".png");
}, 50);

Answer 2

You can delay your screenshot using the following method :
var page = new WebPage();
page.open('http://stackoverflow.com/', function (status) {
just_wait();
});
function just_wait() {
setTimeout(function() {
page.render('screenshot.png');
phantom.exit();
}, 2000);
}
Here, your screenshot is taken 2000ms after your page is loaded.
Set the delay accordingly to allow the page to completely load all resources.