I have tried to add font using below code in head tag of html but it is not working.
DOM PDF is showing it's default font. But i want to show custom fonts as per my website. So tried below code
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
asked Jan 21, 2021 at 13:09
ZealousWeb
2,1561 gold badge5 silver badges16 bronze badges
2 Answers 2
We have added particular font folder in media path. After that we have called it in head tag.
Below code is properly working.
<?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$storeManager = $objectManager->get('Magento\Store\Model\StoreManagerInterface');
$currentStore = $storeManager->getStore();
$mediaUrl = $currentStore->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
?>
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'Barlow';
font-style: normal;
font-weight: normal;
src: url(<?= $mediaUrl ?>font/Barlow-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'BarlowBold';
font-style: normal;
font-weight: normal;
src: url(<?= $mediaUrl ?>font/Barlow-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'BarlowSemiBold';
font-style: normal;
font-weight: normal;
src: url(<?= $mediaUrl ?>font/Barlow-SemiBold.ttf) format('truetype');
}
body { font-family: 'Barlow'; }
</style>
</head>
<body>
<header>
Write header content here
</header>
<footer>
Write footer content here
</footer>
<div class="productpdf-sec">
Write other content
</div>
</body>
</html>
answered Jan 21, 2021 at 13:26
ZealousWeb
2,1561 gold badge5 silver badges16 bronze badges
I have also invested good amount of time to find the correct way, you have to set the options for custom font directory and it will genrate .utm and other necessory files to load the custom font.
Following is working and tested code on Adobe commerce 2.4.7-p4
$styleFont = "
@font-face {
font-family: customFont;
src: url(static/frontend/vendor/theme/en_US/fonts/yourFont.ttf)
format('truetype');
font-weight: 400;
font-style: normal;
}
body {
font-family: 'customFont';
}";
$finalHtml = '<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
'.$styleFont. '
</style>
</head>
<body>' . $html . '</body>
</html>';
$pdf = new Dompdf();
$options = $pdf->getOptions();
$options->set('isRemoteEnabled', true);
$options->set('pdfBackend', 'CPDF');
$options->setChroot(BP . '/pub');
$options->set('fontDir', BP . '/var/dompdf/fonts');
$options->set('fontCache', BP . '/var/dompdf/fonts');
$pdf->setOptions($options);
$pdf->loadHtml($finalHtml);
$pdf->setPaper('A4', 'portrait');
$pdf->render();
answered Apr 22 at 7:20
Kapil Dev Singh
4796 silver badges15 bronze badges
default