Search code examples
fontsfont-facephantomjs

Bold / Italic doesn't work on custom fonts using PhantomJS

When I try to render a custom font with phantomJS, the bold and italic tags don't work / are not applied.

All my CSS is directly in the HTML template in the <head> in a <style> tag.

Here is what I have:

@font-face {
    font-family: userSelectedFont;
    src: url("/usr/share/fonts/dejavu/DejaVuSerif.ttf");
}

And then in my <body>:

<div style="font-family: userSelectedFont, sans-serif;"><strong><em>Test</em></strong></div>

But phantomJS generates this image: Good font but not in bold or italic

It's definitely using the good font but not applying bold and italic. Any idea ?

PS: If I delete the style="font-family: userSelectedFont-7, sans-serif;" part it works fine in bold and italic...

Solution

  • I just found the solution. You need to provide a font-style and a font-weight to your font-face

    Here is my final code:

    @font-face {
    font-family: 'userSelectedFont';
    font-style: normal;
    font-weight: normal;
    src: url("/usr/share/fonts/dejavu/DejaVuSerif.ttf");
}