Menu
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:
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...
466
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");
}
I have been able to solve this problem in PhantomJS 2.x with CSS:
strong, b {font-weight: normal; -webkit-text-stroke: 0.05em;}
I apply a stroke to the font, which makes it look bold.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
