Como aplicar tipos de fuente usando dompdf en Laravel?

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

3310 147 216 17

Que pasa si la fuente no esta en google fonts? Estoy intentando agregar la poor richard y no me deja

Entonces necesitarás poner los archivos de la fuente en una URL de tu servidor, para poder enlazar con ellos. Ponle URL absolutas a tu servidor. Fíjate que el formato de la fuente sea compatible.

Como aplicar tipos de fuente usando dompdf en Laravel?

Respuestas