Bold and Italic causes custom fonts to revert to Times New Roman

[Ruxed LLC]

It appears we may be having the same (or very similar) issue as Shawn had in his Custom font works until added weight/style reverts face to Times post back in January.

• When we try to bold or italicize one of our custom installed fonts (yataghan from FontSquirrel in this example but having same experience with Google Fonts and other font sources) the font reverts back to Times New Roman in the exported PDF.
• When we leave the font unaltered, it displays properly in the exported PDF.
• We are using version 0.6.1.

In the example below, we are using the single "yataghan" font, which should be affecting every element on the page. In testing via our HTML preview, the "yataghan" font correctly affects every element on the page with the <strong>, <em>, and <h1> through <h6> elements displaying the "yataghan" font as intended. Unfortunately, you can see this is not the case in the attached PDF example.

Any help on this would be greatly appreciated. Thanks!

HTML

<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890</p>
<hr />
<p>normal <strong>bold (strong)</strong> <em>italic (em)</em> <strong><em>bold italic (strong + em)</em></strong></p>
<hr />
<h1>Header 1 (bold by default)</h1>
<h2>Header 2 (bold by default)</h2>
<h3>Header 3 (bold by default)</h3>
<h4>Header 4 (bold by default)</h4>
<h5>Header 5 (bold by default)</h5>
<h6>Header 6 (bold by default)</h6>

CSS
@font-face {
    font-family: 'yataghan';
    src: url('/libraries/fonts/fontsquirrel/yataghan-webfont.ttf') format('truetype');
    font-weight: normal; font-style: normal;}

h1, h2, h3, h4, h5, h6, p {
    font-family: yataghan;}

PDF EXAMPLE OUTPUT
See attached "ruxed-bold-italic-issue-01.pdf"

[BrianS]

A font family is a collection of related fonts that represent the same font design (e.g. Times New Roman) in different variations (e.g. style, or weight) (ref). Though some programs can fake a variation (e.g. making a normal font appear italic by skewing the characters) dompdf doesn't do this. Each variant requires it's own font definition within dompdf. 

You can have yataghan normal and yataghan bold, but you have to tell dompdf what font file to use for those two variations. You haven't specified a font to use when yataghan is bold and so dompdf chooses the next valid font. Since you haven't specified one in the CSS dompdf falls back to the default font from your settings, which looks to be Times New Roman. What you need is to add a bold variant to your CSS, which can be the same as your normal variant. Here's the updated CSS:

@font-face {
    font-family: 'yataghan';
    src: url('/libraries/fonts/fontsquirrel/yataghan-webfont.ttf') format('truetype');
    font-weight: normal; font-style: normal;}

@font-face {
    font-family: 'yataghan';
    src: url('/libraries/fonts/fontsquirrel/yataghan-webfont.ttf') format('truetype');

    font-weight: bold; font-style: normal;}

h1, h2, h3, h4, h5, h6, p {
    font-family: yataghan;}

(You might want to go ahead and add the variants for italic and bold-italic as well.)

[Ruxed LLC]

Thanks! Success!