Display @font-face Fonts in Capybara-Webkit

Question

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.sstatic.net/lBbFn.jpg

Is there any way to fix this?

Fibrovascular

Any success with the issue? – Nolte

Answer 1

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.

Bead

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. – Bead

Answer 2

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.

Untuck