Skip to content
This repository has been archived by the owner on May 30, 2023. It is now read-only.

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

Closed
paulwalczewski opened this issue Feb 8, 2016 · 29 comments
Labels

Comments

@paulwalczewski
Copy link

paulwalczewski commented Feb 8, 2016

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.

@tykarol
Copy link

tykarol commented Feb 10, 2016

+1

1c

@jacdobro
Copy link

+1

6 similar comments
@therealmikz
Copy link

+1

@KoderoPL
Copy link

+1

@Swiezynka
Copy link

+1

@miase
Copy link

miase commented Feb 11, 2016

+1

@nitroo88
Copy link

+1

@simplecooler
Copy link

+1

@chrisber
Copy link

Maybe related to issue #13742

@thisispaul
Copy link

+1

@geri777
Copy link

geri777 commented Jun 8, 2016

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

@myaffee
Copy link

myaffee commented Jun 30, 2016

+1

3 similar comments
@gwu
Copy link

gwu commented Jul 14, 2016

+1

@oleghind
Copy link

oleghind commented Aug 1, 2016

+1

@SwapnilKamdar
Copy link

+1

@ziemkowski
Copy link

+1

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

image

@ziemkowski
Copy link

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

@raghu185
Copy link

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.

@ricardo
Copy link

ricardo commented Jul 8, 2017

+1

7 similar comments
@evandrojr
Copy link

+1

@youhyunkim
Copy link

+1

@fvoordeckers
Copy link

+1

@hellokatili
Copy link

+1

@sandersu
Copy link

+1

@mossila
Copy link

mossila commented Feb 9, 2018

+1

@djurnamn
Copy link

+1

@stale stale bot added the stale label Dec 25, 2019
@stale
Copy link

stale bot commented Dec 28, 2019

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!

@stale stale bot closed this as completed Dec 28, 2019
@pranjalworm
Copy link

+1

1 similar comment
@PatrickRWright
Copy link

+1

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests