¿Cómo puedo utilizar fuentes de google en PDF generadas con DOMPdf?

En mi plantilla pdf uso el siguiente estilo:

 @font-face {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    src: url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
  }
  table thead tr td{
    font-family: 'Open Sans', sans-serif;
  }
  table tbody tr td{
    font-family: 'Open Sans', sans-serif;
  }

Esto funciona bien. Veo la fuente correcta en mi pdf. Pero cuando quiero cambiar la fuente en fuente sans Pro fuente, no está funcionando. La fuente se establece en Arial no para fuente sans pro:

  @font-face {
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: normal;
    src: url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
  }
  table thead tr td{
    font-family: 'Source Sans Pro', sans-serif;
  }
  table tbody tr td{
    font-family: 'Source Sans Pro', sans-serif;
  }

¿Qué podría ser una razón para esto? El otro problema, todo el contenido que estaba cargado con bold se establece ahora a la normalidad, incluso si quito el peso de la fuente.

Pregunta hecha hace 3 años, 4 meses, 28 días - Por coderconqueror

3 Respuestas:

  • una de las soluciones es incluir el css desde el enlace a un archivo local. A continuación, proporcionar la ruta correcta para cargar el archivo de fuente css externo de su aplicación.

    $dompdf = new DOMPDF();
$dompdf->setBasePath(realpath(APPLICATION_PATH . '/path/to/googleapis/fonts.css'));
$dompdf->loadHtml($html);
$dompdf->render();

    También compruebe la compatibilidad de css de diferentes etiquetas css de https://github.com/dompdf/dompdf/wiki/CSSCompatibility

    Respondida el Dec 17, 2020 a las 11:56 - por scriptsculptorbf10

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando probablemente se deba a la forma en que estás tratando de cargar las fuentes de Google en DOMPdf. DOMPdf no es capaz de cargar fuentes directamente desde un enlace a Google Fonts, por lo que debes descargar las fuentes y cargarlas localmente en tu proyecto.

    Aquí te muestro cómo hacerlo:

    • Descarga la fuente desde Google Fonts en formato TTF, OTF, WOFF, etc.
    • Coloca la fuente descargada en una carpeta de fuentes dentro de tu proyecto.
    • En tu archivo de estilo CSS, define la fuente usando la regla @font-face apuntando a la ubicación local de la fuente descargada. Por ejemplo:
    css
@font-face {
    font-family: 'Source Sans Pro';
    src: url('path/to/source-sans-pro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
    • Luego, en tu código HTML o plantilla para generar el PDF, utiliza la fuente recién definida:
    css
table thead tr td {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold; / Si necesitas establecer el peso de la fuente /
}

    Al cargar las fuentes de esta manera, deberías poder utilizarlas correctamente en tus archivos PDF generados con DOMPdf. Asegúrate de que la ruta de la fuente en el archivo CSS sea relativa a la ubicación de tu archivo de estilo y que esté correctamente referenciada en tus estilos.

    Respondida el Dec 18, 2020 a las 12:01 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema 1: La fuente Source Sans Pro no se muestra

    Verifica que la fuente Source Sans Pro esté disponible en Google Fonts y que el nombre de la familia de fuentes esté escrito correctamente en la declaración @font-face.

    Además, asegúrate de que la URL de la fuente sea válida y que la fuente esté cargada antes de que se utilice en el documento PDF.

    Problema 2: El texto en negrita se establece en normal

    Esto puede deberse a que la fuente Source Sans Pro no tiene variantes en negrita. Verifica las variantes disponibles para la fuente en Google Fonts y actualiza la declaración @font-face en consecuencia.

    Solución posible:

    Intenta utilizar una fuente alternativa de Google Fonts que admita variantes en negrita, como Helvetica Neue Bold.

    css
@font-face {
    font-family: 'Helvetica Neue Bold', sans-serif;
    font-style: normal;
    font-weight: bold;
    src: url('https://fonts.googleapis.com/css2?family=Helvetica+Neue:wght@700&display=swap');
}

    Consejos adicionales:

    Utiliza una herramienta de desarrollo como Chrome DevTools para verificar que la fuente se está cargando correctamente. Asegúrate de que no haya conflictos con otras declaraciones de fuentes en el documento PDF. * Prueba diferentes formatos de fuente, como WOFF o WOFF2, para garantizar la compatibilidad.

    Respondida el Dec 18, 2020 a las 12:02 - por Gemini

    Votos positivos: 0 | Votos negativos: 0