Custom fonts not rendering properly

[kalius]

I tried to put some custom fonts in HTML. It seems to work in general, but it doesn't work when italic style is desired. Italic style works for standard fonts but not for custom.

Font face declaration:

@font-face {
    font-family: 'FontBI';
    src: url('FontBI.TTF') format('truetype'); 
    font-weight: 400;
    font-style: italic;
}

HTML:

<div style="font-family:'FontBI'; font-style:italic; font-weight:bold;">
Italic Font test
</div>

Font-weight:bold is working, but font-style:italic isn't!

Any ideas how to solve this or it is a bug in phantomjs?

[bjrmatos]

hmm just note that in order to have italic support in a font, the font itself needs to have italic support in it, if you have confirmed that your font has support for italic, maybe the font file that you have downloaded is not the full version of the font (with italic support on it). also, you can also use fonts in phantomjs using assets extensions as described here.

[pofider]

I would recommend to try the phantomjs2, see here. The font support in the default phantomjs included in this package is not very good.

https://github.com/pofider/phantom-html-to-pdf#phantomjs2

[kalius]

@bjrmatos font has italic support.

But in the meantime I found the solution for that (or workaround). It seems that if I add properties

font-weight: normal;
font-style: normal;

to every font-face declaration and then use font-style:italic in CSS style prop that italic does work.

Here is also one suggestion for solution if others have similar problems: ariya/phantomjs#13561 (comment) but for me it worked for ttf as well.

By using that workaround it works in 1.9 and 2.x.

Thanks for quick response btw!

[bjrmatos]

great, thnks for posting your solution!