Phantomjs: Phantom 2.x not rendering font-style property (bold & italic) when using font-face

Created on 8 Feb 2016  路  27Comments  路  Source: ariya/phantomjs

Hello,

we have stumbled upon an issue with Phantom, since we migrated to 2.x branch - styled fonts (font-style) are not rendered as they should (applied style is not visible).

I've prepared a fiddle:
https://jsfiddle.net/ghzs1egj/5/

If you put that through phantom you will see that bold is actually not applied.

We have tried different declarations of font-face, different font types - and nothing helps.
Using separate font files for different declaration can't be treated as a solutions for 2 reasons:

  • this would bloat file transfer (3-4x more fonts to handle...)
  • not all fonts are avaiable in their italic/bolded/bolded+italic versions.

In Phantom 1.9x it was working.

stale

Most helpful comment

Okay so this makes sense now. PhantomJS v2 uses a new version of WebKit, which is causing the Google Fonts CDN to serve *.woff2 files, which is apparently where the problem is. If you fake an ancient user agent, the endpoint will send you an older file which still renders correctly in PhantomJS v2.

Workaround: I was able to get weights and styles to render correctly by setting my user agent to Firefox 27::

page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0'

This causes the Google Fonts CDN to serve *.woff files and now we have font weights and styles again (note that Arima Madurai _does not_ offer italics):
image

All 27 comments

+1

1c

+1

+1

+1

+1

+1

+1

+1

Maybe related to issue #13742

+1

+1
As a workaround I am using a font which is bold by definition. For example: b,strong {font-family:Arial-Bold}

+1

+1

+1

+1

+1

So while this messes up web fonts served by Google Fonts, TypeKit appears to work as expected:

image

Okay so this makes sense now. PhantomJS v2 uses a new version of WebKit, which is causing the Google Fonts CDN to serve *.woff2 files, which is apparently where the problem is. If you fake an ancient user agent, the endpoint will send you an older file which still renders correctly in PhantomJS v2.

Workaround: I was able to get weights and styles to render correctly by setting my user agent to Firefox 27::

page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0'

This causes the Google Fonts CDN to serve *.woff files and now we have font weights and styles again (note that Arima Madurai _does not_ offer italics):
image

Considering the issue has been reported over a Year back. Any new updates on this ? , I am still facing this issue in 2.1.1, are there any plans to fix this.

+1

+1

+1

+1

+1

+1

+1

+1

Due to our very limited maintenance capacity (see #14541 for more details), we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed. In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!

Was this page helpful?
0 / 5 - 0 ratings