Insert and modify new font family in mpdf 8 codeigniter

user_11157508 0
Viewed 514

I've using mpdf to show photo user in pdf. I've tried to insert new font Poppins to mpdf. I have tried using import from google fonts like @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');, then I want to change font weight, but the result is same.

Here's the code

<html>
   <head>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
    </style>
   </head>
   <body style="background-image: url('<?= base_url(); ?>assets/image.png');width:50%;height:10%;background-size:no-repeat;background-size:cover;text-align:center;">
      <h2 style="margin-top:550px;width:76%;text-align:center;position:absolute;z-index:200;font-family: 'Poppins', sans-serif;font-weight: 900;"><?= "name"; ?></h2>
   </body>
</html>

Do you know how to change font weight or add font family correctly ?

mpdf codeigniter
1 Answers

as by mpdf documentation you need to set this up in your controller, here is the snippet I used for RockSalt and PT Caption fonts. Make sure to place the *.ttf files into the corresponding folder, in my case: /assets/_pdf/_fonts

$defaultConfig = (new Mpdf\Config\ConfigVariables())->getDefaults();
$fontDirs = $defaultConfig['fontDir'];      
$defaultFontConfig = (new Mpdf\Config\FontVariables())->getDefaults();
$fontData = $defaultFontConfig['fontdata'];

$mpdf = new \Mpdf\Mpdf([
    'fontDir' => array_merge($fontDirs, [
        $_SERVER['DOCUMENT_ROOT'] . '/assets/_pdf/_fonts',
    ]),
    'fontdata' => $fontData + [
        'rocksalt' => [
            'R' => 'rocksalt.ttf',
        ],
        'ptsanscaption' => [
            'R' => 'ptsanscaption.ttf',
        ]
    ],
    'default_font' => 'ptsanscaption'
]);

$html=$this->load->view('my_mpdf','',true);
$mpdf->WriteHTML($html);

note: in my view file my_pdf (where I build the html I want to output) in order to see a "pre-view" in the browser (I'm using the same view file for building the pdf and for the preview), I'm applying the fonts using

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=PT+Sans+Caption" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Rock+Salt" />

and css as usual

.title{
        font-family: 'Rock Salt', rocksalt;
}

edit: In order to change your font-weights, you follow the same rules. Just copy Poppins-Regular.ttf and Poppins-Bold.ttf (or any other) to you font's folder and add the font variant you wish to the fonts array:

$mpdf = new \Mpdf\Mpdf([
    'fontDir' => array_merge($fontDirs, [
        $_SERVER['DOCUMENT_ROOT'] . '/assets/_pdf/_fonts',
    ]),
    'fontdata' => $fontData + [
        'rocksalt' => [
            'R' => 'rocksalt.ttf',
        ],
        'ptsanscaption' => [
            'R' => 'ptsanscaption.ttf',
        ],
        'poppins' => [
            'B' => 'Poppins-Bold.ttf',
        ],
        'poppins' => [
            'R' => 'Poppins-Regular.ttf',
        ]
    ],
    'default_font' => 'ptsanscaption'
]);

then create a css rule:

.my_style{
    font-family: 'Poppins'; 
    color:red; 
    font-size: 16px;
}

and apply it in the html:

<div class="my_style">
    <b>bold text</b>
    regular text
</div>
user_22754900
Related