How to Set Different font-family in Dompdf

When generating a PDF with Dompdf then it ignores fonts which 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 PDF of MySQL database table records and set its font-family using Dompdf.

How to set different font-family in Dompdf


Contents

  1. Download
  2. Table structure
  3. Configuration
  4. Copy fonts
  5. Create PDF and set font-family
  6. Conclusion

1. Download

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

How to set different font-family in Dompdf


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 project root.

How to set different font-family in Dompdf

  • 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.

How to set different font-family in Dompdf


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 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.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request.
Spread the love
  • 1
  •  
  •  
  •  
  •  

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *