casperjs screenshot returning blank square boxes. Please tell me possible solution to get the character instead of boxes - phantomjs

Question

I am using CasperJS 1.1.0 with PhantomJs 2.0. I am using Linux server.
I have a script, trying to run and take screenshots.
This screenshot is fine for local server nor for live.
Screenshot of the site will look like this:
https://i.stack.imgur.com/dJe4L.png
So, instead of the actual letters, it renders square boxes.
var casper = require('casper').create({
verbose: true,
});
casper.options.waitTimeout = 40000;
casper.options.viewportSize = {width: 1200, height: 768};
phantom.cookiesEnabled = true;
casper.start('http://domain.com/', function() {
this.wait(5000, function () {
this.echo(this.getTitle());
this.capture("screenshot.png");
});
});
casper.run(function () {
this.exit(0);
});
Please tell me where i am wrong.

Answer 1

I would use waitForSelector on the items that you're wanting screenshots of, rather than the 5 second hard wait. Consider adding
verbose: true
waitTimeout:20000
Which will give you 20 second wait limit, longer than the 5 seconds default. Then, instead of your current wait, use something like:
this.waitForSelector('img', function() {
this.capture('test.png')
}
You can change the img selector to be something more specific, but waiting for the images themselves to load is a pretty certain way of making sure they will be captured. The reason we changed the timeout to 20 seconds is in case their site takes a little longer to load their images :)
Let me know if this doesn't help, happy to follow up. I will need examples of the site and the image you'd like though.
EDIT: Can confirm this works for me, let me know if it works for you.
var casper = require('casper').create({
verbose: true,
logLevel: 'error',
pageSettings: {
loadImages: true,
loadPlugins: true,
userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11'
},
clientScripts: ['vendor/jquery.min.js', 'vendor/lodash.js'],
viewportSize: {
width: 1600,
height:1000
},
});
casper.start('http://dev.bunkerbradleycouture.com/')
casper.then(function() {
this.waitForSelector('img', function() {
this.capture('test.png')
})
})
casper.run()