title: PhantomJS Render Page Fonts
body: <p>I am using PhantomJS to take screenshots of webpages.  </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I have tried binding to various page events, but again, no luck.</p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/pbq4m.png" alt="screenshot 1">
  <img src="https://i.stack.imgur.com/4L5nK.png" alt="screenshot 2"></p>
  
  <p>As a note, I have tried CasperJS as well (knowing that it is based on PhantomJS so not expecting it to be any different).</p>