> Faqs > Como aplicar tipos de fuente usando dompdf en Laravel?

Como aplicar tipos de fuente usando dompdf en Laravel?

Al usar una vista blade para generar un reporte en PDF con DomPDF, se pierden los tipos de fuentes aplicadas en el css. Como se debe hacer para que estos tipos de fuente no se pierdan?

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Para aplicar un tipo de fuente en DOMPDF con Laravel yo lo he resuelto así.

1.- Tomar el CSS que te devuelve Google Fonts. Por ejemplo para descargar el CSS de Roboto, uso este comando.

wget https://fonts.googleapis.com/css2\?family\=Roboto:wght@300\;400\;700

2.- Descargo todas las fuentes (los archivos de las fuentes .ttf y demás, del sitio de Google Fonts) con el enlace "Download famlily". Eso te descarga un zip con todos los archivos de las fuentes que hayas elegido.

3.- Descomprimo todas las fuentes y las coloco que la carpeta "storage/fonts". Así tendré archivos con rutas como "storage/fonts/Roboto-Black.ttf", "storage/fonts/Roboto-Bold.ttf", "storage/fonts/Roboto-Regular.ttf"...

4.- En la vista Laravel que uso para generar el PDF, en el archivo blade, tengo la etiqueta <style> en el <head>, en el que he colocado todo el CSS que obtuve de Google Fonts, que tiene un aspecto como este:

<style>
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 300;
      src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5vAw.ttf) format('truetype');
    }
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5Q.ttf) format('truetype');
    }
    @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlvAw.ttf) format('truetype');
    }
    
    /* Añado la declaración de font-family, para usar la fuente de Google Fonts en este PDF */
    
    body {
        font-family: 'Roboto', serif;
        color: 303030;
    }
    
    /* todo el otro CSS necesario para el PDF */
    /* ... */
</style>

Ya está, con esto consigo que DomPDF me tome perfectamente la fuente... me costó un poco encontrar una solución. Te paso la issue de GitHub donde extraje esta información, por si hay algún tema que he dejado pasar o que te ataña a tu caso directamente.

https://github.com/dompdf/dompdf/issues/784

Espero que te sirva, ya me contarás!

Miguel Angel
1651 76 102 5