How to Set Different font-family in Dompdf

When generating a PDF with Dompdf then it ignores fonts that are not available in its internally – Helvetica, Times-Roman, Courier, Zapf-Dingbats, Symbol.

Require to load the fonts for use in PDF creation which is not existing in Dompdf internal fonts.

In this tutorial, I am creating a PDF of MySQL database table records and set its font-family using Dompdf.

How to Set Different font-family in Dompdf

Download

Download
Table structure
Configuration
Copy fonts
Create PDF and set font-family
Conclusion

1. Download

Download Dompdf latest version from here.
Copy and extract it in your project directory.

2. Table structure

Create users table and add some records.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(100) NOT NULL,
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

3. Configuration

Create a config.php for the database connection.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

4. Copy fonts

Create a new fonts folder at the project root.

Copy your fonts which you want to use in your pdf to the fonts folder. I have copied OpenSans-Regular.ttf and OpenSans-Bold.ttf to the folder.

5. Create PDF and set font-family

Create a new pdf.php file.

Load Fonts and Use it

Create $html variable to store data in HTML format for pdf generation.

Load fonts using @font-face CSS rule.

In the example, I am loading OpenSans-Regular and OpenSans-Bold fonts.

Pass the file path in src.

Now, use these fonts in the selectors.

I used 'OpenSans-Bold' in <table > header columns and 'OpenSans-Regular' in <table > body columns.

Add data and create a PDF

Fetch all records from the users table and create new rows.

Create an object of Dompdf and pass $html in loadHtml() method.

Completed Code

<?php
include "config.php";

$html = "<style>
@font-face {
  font-family: 'OpenSans-Regular';
  font-style: normal;
  font-weight: normal;
  src: url(http://" . $_SERVER['SERVER_NAME']."/dompdf/fonts/OpenSans-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'OpenSans-Bold';
  font-style: normal;
  font-weight: 700;
  src: url(http://" . $_SERVER['SERVER_NAME']."/dompdf/fonts/OpenSans-Bold.ttf) format('truetype');
}

table thead tr td{
    font-family: 'OpenSans-Bold';
}
table tbody tr td{
    font-family: 'OpenSans-Regular';
}
</style>";
$html .= "<table border='1' width='100%' style='border-collapse: collapse;'>
        <thead>
            <tr>
                <td>S.no</td>
                <td>Username</td>
                <td>Name</td>
                <td>Email</td>
            </tr>
        </thead>
        <tbody>
";

$usersData = mysqli_query($con,"select * from users");
$sno = 1;
while($row = mysqli_fetch_assoc($usersData)){
    $html .= "<tr>
        <td>".$sno++."</td>
        <td>".$row['username']."</td>
        <td>".$row['name']."</td>
        <td>".$row['email']."</td>
    </tr>";
}
$html .= "</tbody></table>";

$filename = "newpdffile";

// include autoloader
require_once 'dompdf/autoload.inc.php';

// reference the Dompdf namespace
use Dompdf\Dompdf;

// instantiate and use the dompdf class
$dompdf = new Dompdf();

$dompdf->loadHtml($html);

// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'landscape');

// Render the HTML as PDF
$dompdf->render();

// Output the generated PDF to Browser
$dompdf->stream($filename);

6. Conclusion

Use @font-face CSS rule to load your font-family and use it in your required selector.

If you found this tutorial helpful then don't forget to share.

Contents