mPDF v8.0.4 - Print custom fonts on the PDF file

1° the point should be very simple to solve but i'm struggling hard since three days.

2° I just need to use two fonts with the PDF Roboto-Regular and Roboto-thin.

3° I've already read the manual, but unfortunatly i'm still doing wrong or there is somenthing missing in the file.
Documentation: https://mpdf.github.io/fonts-languages/font-names.html

4° I just get the Roboto-Regular printed on the PD file, but NOT the Roboto-Thin
Any help is very very very appreciated!

file testmpdf.php

// Load MPDF Loader
require_once __DIR__ . '/vendor/autoload.php';

use Mpdf\Mpdf;

$mpdf = new Mpdf();
$mpdf = new \Mpdf\Mpdf(['tempDir' => __DIR__ . '/custom/temp/dir/path']);

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

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

$mpdf= new \Mpdf\Mpdf(
['mode' => 'utf-8',
'format' => 'A4',
'margin_left' => 0,
'margin_right' => 0,
'margin_top' => 0,
'margin_bottom' => 0,
'margin_header' => 0,
'margin_footer' => 0,
'fontDir' => array_merge($fontDirs, [
        __DIR__ . '/assets/css/fonts',
    ]),
    'fontdata' => $fontData + [
        'roboto' => [
            'R' => 'Roboto-Regular.ttf',
            'I' => 'Roboto-Thin.ttf',
        ]
    ],
    'default_font' => 'roboto'

]); //use this customization

HTML PART

$html = '
<div class="bkg_div">
    <p><img style="margin-top:20px;margin-left:35px;" src="images/silhouette_office.png" width="80" /></p>

  <p style="font-family:roboto;font-weight:900;font-size: 30px;color: #ffffff;text-transform: uppercase;margin-left:35px;">BOOKING INVOICE</p>

  <p style="margin-left:35px;font-family:Roboto-thin;font-weight:100;">Gratid&#227;o '.$username.'. Your order has been ordered. We sent the proof of purchase by email to you.<br/>
    Order Booking Time: <b>48 hours</b> - Please make payment now before you lose your reservation!<br/>
  </p>  
</div>

CSS file

li.woocommerce-order-overview__payment-method.method{
    background: #C8D2D9;
    padding: 5px;
    width: 80%;
    position: relative;
    border-bottom: 3px dotted #ECEFF1 !important;
    border-radius: 0px 0px 24px 24px;
    text-align: center;
    margin: 0px 50px 0px 50px; 
    font-family:'Roboto-thin',sans-serif;
    font-weight:100;
    letter-spacing: 0.04em;    
}

.font_p1 {
  font-weight:400;
  font-size: 30px;
  font-family: Roboto, sans-serif;
  color: #ffffff;
  text-transform: uppercase;
}

Solution

As your fonts are defined in the mPDF instantiation, you need to use font-family: roboto (notice lower case) generally and italics for Roboto Thin.

Alternatively, define two font families:

'fontdata' => $fontData + [
    'roboto' => [
        'R' => 'Roboto-Regular.ttf',
    ],
    'roboto-thin' => [
        'R' => 'Roboto-Thin.ttf',
    ]
],

and use roboto and roboto-thin for font-family declaration.