Adding Fonts

Fonts in RockPdf are applied by the css font-family property. You can either apply that directly in your HTML or of yourse use a CSS/LESS stylesheet. In the examples below we use the direct approach to keep the examples more compact. But you could also do this in your CSS:

h1, h2, h3 {
  font-family: 'your-font-name';
}

From Disk

First you need to grab your font file from platforms like https://www.fontsquirrel.com/

Your font must be in ttf format. Many fonts are only available in otf but can be easily converted with online services like https://cloudconvert.com/otf-to-ttf.

/** @var RockPdf $pdf */
$pdf = $modules->get('RockPdf');
$pdf
  ->addFont([
    'R' => 'site/templates/fonts/Reey-Regular.ttf',
  ])
  ->load("/site/test.php", default: true)
  ->save(preview: true);

<h1>Hello World</h1>
<p class="mt15">This is some text with a nice font!</p>
<p class="mt5 font-bold">Some bold text</p>

Adding multiple fonts

If you want to use multiple fonts on your document you need to specify a name for each font to address it from your stylesheets:

/** @var RockPdf $pdf */
$pdf = $modules->get('RockPdf');
$pdf
  ->addFont([
    'R' => 'site/templates/fonts/Reey-Regular.ttf',
    'B' => 'site/templates/fonts/Reey-Bold.ttf',
  ], name: 'reey')
  ->addFont([
    'R' => 'site/templates/fonts/UbuntuTitling-Bold.ttf',
  ], name: 'ubuntu')
  ->load("/site/test.php")
  ->save(preview: true);

Note: always use lowercase font names.

You always need to add the 'R' (regular) font variant. If you have a 'B' (bold) font variant you can add that as well. But you cannot use 'B' alone. This would not work:

$pdf
  ->addFont([
    // you always must add the 'R' (regular) font variant
    'B' => 'site/templates/fonts/UbuntuTitling-Bold.ttf',
  ], name: 'ubuntu')
  ->load("/site/test.php")
  ->save(preview: true);

<h1>Hello World (default font)</h1>

<p class="mt5" style="font-family: reey">Font Name "reey", using "Reey-Regular.ttf"</p>
<p class="mt5" style="font-family: ubuntu">Font Name "ubuntu", using "UbuntuTitling-Bold.ttf"</p>

From Field

If you want to let the user upload a font file that he can use for his documents RockPdf has you covered.

First create a field fonts and upload your TTF files to that field:

Many fonts come with different files for regular and bold font. You can add the description to your font to tell mPDF what the font is for (see mPDF docs about fonts here: https://mpdf.github.io/fonts-languages/fonts-in-mpdf-7-x.html).

Now we can add this font to our document like so:

/** @var RockPdf $pdf */
$pdf = $modules->get('RockPdf');
$pdf
  ->addFontFromField(
    page: 1,
    field: 'fonts',
  )
  ->load("/site/test.php")
  ->save(preview: true);

If you want to add different fonts from different fields this is what you could do:

/** @var RockPdf $pdf */
$pdf = $modules->get('RockPdf');
$pdf
  ->addFontFromField(
    page: 1,
    field: 'headings',
    name: 'heading-font',
  )
  ->addFontFromField(
    page: 1,
    field: 'text',
    name: 'text-font',
  )
  ->load("/site/test.php")
  ->save(preview: true);

<h1 style="font-family: heading-font;">Heading Text</h1>
<p class="mt5 f20" style="font-family: text-font">Regular Text</p>
<p class="mt5 f20">Default Text</p>

Pro-Tip: You could also omit the name property of the text field to make this the default font for the document and only style headings differently.

Some notes on the CSS side of things:

• you don't need @font-face declarations.
• just reference the font name that you used in $pdf->addFont() in the font-family property.
• declaring font-weight with numbers (400, 700, etc) is not supported. Use font-weight: normal and font-weight: bold instead.

Adding multiple font variants

If you have a font face with regular (400) bold (700) and extra bold (900) variants you can add the extra bold variant with a different name:

/** @var RockPdf $pdf */
$pdf = $modules->get('RockPdf');
$pdf
  ->addFont([
    'R' => 'site/templates/fonts/inter-v13-latin-regular.ttf',
    'B' => 'site/templates/fonts/inter-v13-latin-700.ttf',
], name: 'inter')
  ->addFont([
    'R' => 'site/templates/fonts/inter-v13-latin-900.ttf',
    'B' => 'site/templates/fonts/inter-v13-latin-900.ttf',
  ], name: 'interblack')
  ->load("/site/test.php")
  ->save(preview: true);

<h1>Hello Inter</h1>
<p class="mt5" style="font-family: inter">Font Name "inter", using "inter-v13-latin-regular.ttf"</p>
<p class="mt5" style="font-family: inter"><strong>Font Name "inter", using "inter-v13-latin-700.ttf"</strong></p>
<p class="mt5" style="font-family: interblack">Font Name "interblack", using "inter-v13-latin-900.ttf"</p>