mPDF v8.0.4 – Imprima fuentes personalizadas en el archivo PDF

2 minutos de lectura

Avatar de usuario de Paulo do Porto
paulo do porto

el punto debería ser muy simple de resolver, pero estoy luchando mucho desde hace tres días.

Solo necesito usar dos fuentes con PDF Roboto-Regular y Roboto-thin.

Ya he leído el manual, pero lamentablemente sigo haciendo algo mal o falta algo en el archivo.
Documentación: https://mpdf.github.io/fonts-languages/font-names.html

acabo de recibir el Roboto-Regular impreso en el archivo PD, pero NO en el Roboto-Delgado

¡Cualquier ayuda es muy, muy apreciada!

expediente pruebampdf.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


PARTE HTML

$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>

archivo css

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;
}

  • ¿Cuál es su HTML y CSS?

    – Finwe

    19 de noviembre de 2020 a las 17:56

  • hola @Finwe, actualicé el código. Si tiene alguna pregunta, por favor estoy aquí. ¡Muchas gracias por la ayuda!

    – Paulo do Oporto

    19 de noviembre de 2020 a las 18:27

Avatar de usuario de Finwe
Finwe

Como sus fuentes están definidas en la creación de instancias de mPDF, debe usar font-family: roboto (aviso minúscula) en general y cursiva para Roboto Delgado.

Alternativamente, defina dos familias de fuentes:

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

y use roboto y roboto-thin para declaración de familia de fuentes.

  • Hola @Finwe, muchas gracias por tu gran ayuda. ¡Salvaste mi día! ¡Funciona a las mil maravillas! ; )

    – Paulo do Oporto

    20 de noviembre de 2020 a las 1:00

¿Ha sido útil esta solución?