Font-face not working properly

[simon-dube]

Hi, I am trying to used personalized fonts with the @font-face CSS tag. When I use it in my HTML page inside a in the header, I get some strange results.

The only custom font-family referenced in my HTML and CSS is Helvetica Neue Light Italic. However, for reasons I don't know, the document also has Helvetica Neue (named 'Regular') and Helvetica Neue Light (named 'Light') applied on other sections. Even more bizarre, if in the CSS I specify 'Regular' as font-family for the section weirdly having 'Regular' as font-family, it sets it to some basic HTML font.

Here are some screenshots. Html (Part 1)

Html (Part 2)

CSS

Even if I use ejs to generate my HTML template, I verified and the links to the files are correct. Here are the 2 states I talked about:

-CSS only refers to 'Light' (as shown in the previous screenshot) The title 'Basic Report' should not be in Helvetiva, but it is.

-CSS now sets .reportTitle to 'Regular'

Now this is the result:

You can see that the title clearly doesn't have Helvetica as font-family:

I also got some other weird side effets during my testing.

I found that post about PhantomJS. https://github.com/ariya/phantomjs/issues/12132

I reverted to version 1.9.1 but it didn't correct the problem.

[tagrudev]

Exactly the same problem in here too :)

[dbkaplun]

:+1:

Works on OSX if you add the font to Font Book.app.

[ripper2hl]

i have the same problem and this link help with google fonts http://arunoda.me/blog/phantomjs-webfonts-build.html

[marcbachmann]

I suppose that's working with version 2.0.0. I've upgraded to phantomjs v2. That has a much newer webkit version.