7

When I test my website using capybara-webkit and I take a screenshot, @font-face declarations in CSS are ignored.

This is especially bad because I am using FontAwesome, so there will be major differences to how the page is displayed in a real browser.

How to reproduce: https://gist.github.com/anonymous/4948827

Output: https://i.stack.imgur.com/lBbFn.jpg

Is there any way to fix this?

2 Answers2

1

Some research shows that it is entirely possible to render custom fonts in Capybara-Webkit, the same as with PhantomJS. This PhantomJS Forum Post identifies the trouble issues. A quick summary:

  1. SVG Fonts work best.
  2. OTF fonts tend not to work.
  3. It should be fixed with Qt5, so check what version of Qt you've built against.
Parker Selbert
  • 1,546
  • 13
  • 13
0

Depending on the version of qt that capybara-webkit is built against, webkit needs non-localhost urls whitelisted. That includes meta references to external assets such as fonts.

To make that happen globally, add this to spec_helper.rb in the rspec configuration block:

config.before(:each) do
  page.driver.allow_url("the-domain-name.com")
end

If you have a before :each already, just throw it in there instead. allow_url also accepts an array of strings.

I've placed a comment in your gist to this effect.

IAmNaN
  • 10,305
  • 3
  • 53
  • 51
  • I think this whitelisting has been around a while but qt eats the warnings. qt5 displays them, however, and is how I stumbled on this solution. – IAmNaN Feb 13 '15 at 22:41