How to Implement Fonts in DomPDF, CSS, and WordPress

[Ruxed LLC]

Wanted to give back to the community what we have implemented in our dompdf, css, and WordPress combo. The following fixes these problems that we were having:

• bold, italic, and bold italic fonts defaulting back to Times New Roman and occasionally having baseline alignment issues
• bold, italic, and bold italic fonts defaulting back to the normal font but missing characters and/or having baseline alignment issues

As an extra bonus, the following also taps into dompdf's ability to intelligently use other variant (bold, italic, bold italic) fonts within a font family when one variant (such as bold or italic) is set.

• Normal: you set the font family to "times-new-roman", it gives you access to normal, bold, italic, and bold italic fonts.
• Bonus: you set the font family to "times-new-roman-bold", it gives you access to bold, italic, and bold italic fonts

HOW TO SET IT UP

DOMPDF

1. All dompdf font families must have all 4 individual fonts specified
2. For fonts families with less than 4 fonts, you still need to identify all 4, so select one of the fonts you do have for the missing font

CSS (using the template provided below)

1. Replace "Family Name" with the font family name ("Times New Roman")
2. Replace "familyname" with what you'll reference the font name via css ("times-new-roman", time saver: suggest search/replace as there are 12 instances)
3. Replace "folderfilepath" with the file path of the folder that contains your fonts ("/fonts/", time saver: suggest modifying this in your template first if you're adding more than one font)
4. Replace "fontname" with the 4 individual font names ("Times-New-Roman.ttf", "Times-New-Roman-Bold.ttf", etc.)

HOW TO SELECT FONTS FOR A FONT FAMILY

When selecting other font options when there is a missing font in a font family, you need to consider which font makes the most sense to display when the font requested is not an option. For example, if the user requests a "Bold Italic" font when one does not exist, if you only have normal and bold options, it would make sense to serve up the bold rather than the normal, as that is closest to the user's intent.

Based on the default order of Normal, Bold, Bold Italic, Italic (N | B | BI, I) for adding fonts to dompdf, here are the four most common combos we have ended up using:

• You have all four fonts: N | B | BI | I
• You only have 1 font: N | N | N | N
  
• You only have normal and bold: N | B | B | N
• You only have normal and italic: N | N | I | I

HOW TO OPTIMIZE FONT CLASSES

While you can just leave all the font classes in the template below, we clean out the unused ones so users and developers don't get the idea that missing fonts actually exist. For example, if we only have normal and italic fonts for a font family, we would remove the .font-familynamebolditalic and .font-familynamebold rows from the template below.

Leaving the classes in won't break anything but could cause confusion if a user calls, for example, .font-familynamebolditalic and gets an alternate instead. Purging these unused classes can greatly reduce your .css file as well, especially if you have a lot of font families with only one font in them.

Last note is if you want to have other font class names for a font variant (such as "timesnrb" instead of "times-new-roman-bold") we'd suggest duplicating the default line of css and updating it rather than changing the class name. For usability, this allows a user to target the font specifically by font name (such as "timesnrb" for the "timesnrb.ttf" font) or by how it displays (such as the bold version of Times New Roman would be "times-new-roman-bold"). Makes your css a little more flexible to support a wider range of skills within users.

/* TEMPLATE ***********************************************/
   
/* Family Name */
    @font-face {font-family: 'familyname'; font-weight: normal; font-style: normal;
      /* N  */  src: url('folderfilepath/fontname') format('truetype');}
    @font-face {font-family: 'familyname'; font-weight: bold; font-style: normal;
      /* B  */  src: url('folderfilepath/fontname') format('truetype');}
    @font-face {font-family: 'familyname'; font-weight: bold; font-style: italic;
      /* BI */  src: url('folderfilepath/fontname') format('truetype');}
    @font-face {font-family: 'familyname'; font-weight: normal; font-style: italic;
      /* I  */  src: url('folderfilepath/fontname') format('truetype');}
    .font-familyname {font-family: 'familyname';}
    .font-familynamebold {font-family: 'familyname'; font-weight: bold; font-style: normal;}
    .font-familynamebolditalic {font-family: 'familyname'; font-weight: bold; font-style: italic;}
    .font-familynameitalic {font-family: 'familyname'; font-weight: normal; font-style: italic;}

On our end, our dompdf / WordPress efforts are happening on RPG Bard at http://www.rpgbard.com , which is a role playing game self-publishing tool. As of 9/23/2015 we're still in development but hoping to get the alpha out soon (there's a sign up for alpha access if you're interested in checking it out live once launched).

Hope this was helpful! If you use or improve, please share back as we'd love to see!