Wordpress dompdf custom fonts in pdf WordPress
- SOLVED
I've been trying for 2 days to get custom fonts working in dompdf package, not having much luck.
https://packagist.org/packages/dompdf/dompdf
I am using php composer to install dompdf package. This means I should not manually modify the vendor folder in my theme contents because I am not committing this to the my project repository.
https://getcomposer.org/
https://packagist.org/packages/dompdf/dompdf
This is not massively a wordpress related question but I am using this in wordpress so if anyone can get this working would be great thanks.
I've made a demo for this question using docker compose so you can quickly spin up a php local environment for testing dompdf...
https://github.com/joshmoto/dompdf-composer-font
https://i.stack.imgur.com/vVeyb.png
In the above repository run these commands to start the demo...
- npm install
- npm production
- composer require dompdf/dompdf
- docker-compose up -d
https://i.stack.imgur.com/y3QE0.png
In pdf.scss I am importing fontawesome (via an npm package) and also including 4 custom ttf fonts.
/* npm fonts
-------------------------------------------------- */
@import "~font-awesome/scss/font-awesome";
/* custom fonts
-------------------------------------------------- */
$SolPro: (
("SolPro-Light", 'normal', '200'),
("SolPro-Regular", 'normal', 'normal'),
("SolPro-Bold", 'normal', 'bold'),
("SolPro-Black", 'normal', '900')
);
@each $s in $SolPro {
@font-face {
font-family: 'SolPro';
src: url('../fonts/#{nth($s,1)}.ttf') format('truetype');
font-style: #{nth($s,2)};
font-weight: #{nth($s,3)};
}
}
/* custom css
-------------------------------------------------- */
H1 {
font-family: "SolPro";
font-weight: normal;
}
I am then importing dist pdf.css into the create-pdf.php file...
<?php
// load our composer autoloader
require 'vendor/autoload.php';
// use dom pdf
use Dompdf\Dompdf;
use Dompdf\Options;
$pdf = new Dompdf();
$options = new Options();
$options->set(array(
'isRemoteEnabled' => true
));
// lets start our output buffer for pdf html
ob_start();
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="dist/css/pdf.css">
</head>
<body>
<h1><i class="fa fa-stack-overflow"></i> stackoverflow</h1>
</body>
</html>
<?php
// output html on page
//$html = ob_get_clean();
//echo $html;
//exit;
// generate our PDF from our html
$pdf = new Dompdf($options);
$pdf->loadHtml($html = ob_get_clean());
$pdf->setPaper('A4','portrait');
$pdf->render();
$pdf->stream("codex",["Attachment" => 0]);
So if you run create-pdf.php via http://localhost/create-pdf.php, but uncomment the // output html on page block so only the pdf html outputs, this is what it outputs...
https://i.stack.imgur.com/HjECQ.png
But if you re-comment that block back and stream the pdf using dompdf, this is what it outputs...
https://i.stack.imgur.com/zfRI3.png
Annoyingly these fonts are not getting automatically added to the dompdf fonts folder...
https://i.stack.imgur.com/HjECQ.png
But I have experienced dompdf automatically adding these fonts and updating dompdf_font_family_cache.dist.php, but in the most simplest example above and my current project, they are not getting added.
Is there a proper way to do add fonts dompdf? I've read about 20 posts with no definitive answer for a composer environment.
A simple solution for this type of environment, with out manually modifying the vendors directory would be awesome.
Thanks
----------
I have also tried using load_font.php to manually load fonts into dompdf fonts folder following this guide...
https://github.com/dompdf/dompdf/issues/1928
Even though it seems like a filthy way to manage this because you are manually modifying the vendor folder which is generated via composer.
Step 1 Get your .ttf fonts and place inside vendor/dompdf/dompdf...
https://i.stack.imgur.com/N4aYo.png
Step 2 Download dompdf/utils package from github (doesn't exist on packagist) then copy load_font.php and autoload.inc.php to /vendor/dompdf/dompdf...
https://github.com/dompdf/utils
https://i.stack.imgur.com/WCOil.png
Step 3 Ensure you have php-svg-lib and php-font-lib folders inside /vendor/dompdf/dompdf/lib...
https://github.com/PhenX/php-svg-lib
https://github.com/PhenX/php-font-lib
*I copied these from /vendor/phenx as they were included in dompdf composer package.*
https://i.stack.imgur.com/nAbPk.png
Step 4 Edit the load_font.php file make sure that the first require_once points to the dompdf autoloader...
<?php
// 1. [Required] Point to the composer or dompdf autoloader
require_once "../../autoload.php";
Step 5 Install the fonts by running command php load_font.php SolPro SolPro-Black.ttf SolPro-Bold.ttf SolPro-Light.ttf SolPro-Regular.ttf in /vendor/dompdf/dompdf...
joshmoto@joshmoto-iMac dompdf % php load_font.php SolPro SolPro-Black.ttf SolPro-Bold.ttf SolPro-Light.ttf SolPro-Regular.ttf
Copying SolPro-Black.ttf to /Users/joshmoto/Sites/dompdf-composer-font/vendor/dompdf/dompdf/lib/fonts/SolPro-Black.ttf...
Generating Adobe Font Metrics for /Users/joshmoto/Sites/dompdf-composer-font/vendor/dompdf/dompdf/lib/fonts/SolPro-Black...
Copying SolPro-Bold.ttf to /Users/joshmoto/Sites/dompdf-composer-font/vendor/dompdf/dompdf/lib/fonts/SolPro-Bold.ttf...
Generating Adobe Font Metrics for /Users/joshmoto/Sites/dompdf-composer-font/vendor/dompdf/dompdf/lib/fonts/SolPro-Bold...
Copying SolPro-Light.ttf to /Users/joshmoto/Sites/dompdf-composer-font/vendor/dompdf/dompdf/lib/fonts/SolPro-Light.ttf...
Generating Adobe Font Metrics for /Users/joshmoto/Sites/dompdf-composer-font/vendor/dompdf/dompdf/lib/fonts/SolPro-Light...
Copying SolPro-Regular.ttf to /Users/joshmoto/Sites/dompdf-composer-font/vendor/dompdf/dompdf/lib/fonts/SolPro-Regular.ttf...
Generating Adobe Font Metrics for /Users/joshmoto/Sites/dompdf-composer-font/vendor/dompdf/dompdf/lib/fonts/SolPro-Regular...
joshmoto@joshmoto-iMac dompdf %
Which then does add the fonts to /vendor/dompdf/dompdf/lib/fonts and it does update dompdf_font_family_cache.dist.php array...
Unfortunately it does not support numerical font-weight values.
<?php return array (
/* ... */
'solpro' => array(
'normal' => $fontDir . '/SolPro-Black',
'bold' => $fontDir . '/SolPro-Bold',
'italic' => $fontDir . '/SolPro-Light',
'bold_italic' => $fontDir . '/SolPro-Regular',
),
) ?>
But when I run create-pdf.php via http://localhost/create-pdf.php it still outputs pdf with fonts missing...
https://i.stack.imgur.com/zfRI3.png
Answers (2)
Arnav Joy answers:
are you stil looking for help?
joshmoto comments:
Yes please, you got an idea?
Still not working.
joshmoto comments:
Do you know how use docker? If you download this https://github.com/joshmoto/dompdf-composer-font
and then run...
- npm install
- npm production
- composer require dompdf/dompdf
- docker-compose up -d
You will have my exact simplest environment
Francisco Javier Carazo Gil answers:
Have you tried with font-face?
https://makitweb.com/how-to-set-different-font-family-in-dompdf/#create
I had used DOMPDF with this method and I had fewer problems.
joshmoto comments:
Hi Francisco,
I was already using font-face in my css.
But the difference with that article is that he using absolute font urls in font face, adding in the head and calling the fonts from the dompdf lib font folder.
I tried both, please see imgur link below...
https://imgur.com/a/vVNpUzd
Francisco Javier Carazo Gil comments:
You are using urls, not paths.
You have to use the path in $fontDir
For example with this function: https://developer.wordpress.org/reference/functions/get_stylesheet_directory/
joshmoto comments:
I'm just testing in a local test environment so not actually using wordpress right now. Will use what ever solution works in the raw test environment in my wordpress theme
Francisco Javier Carazo Gil comments:
Try with WordPress. You will need to use their functions.
And tell me back if you have problems.