Fuentes web de Google y generación de PDF desde HTML con wkhtmltopdf

css google-font-api

Question

Estoy usando wkhtmltopdf para convertir archivos HTML en formato PDF; Da resultados sorprendentemente buenos, representando el PDF exactamente como lo haría WebKit.

Estoy utilizando Google Web Fonts para dar a los usuarios la posibilidad de personalizar la apariencia del documento que han editado, ofreciéndoles la posibilidad de elegir entre unas pocas fuentes. También funciona perfectamente en un navegador .

El problema es que no consigo que las Fuentes de Google funcionen al convertir dichos archivos HTML a PDF con wkhtmltopdf. Leí que otras personas tenían el mismo issue .

¿Podría alguien ayudarme por favor a arreglar esto?

EDITAR : declarar @ font-face directamente en el CSS tampoco funciona.

Answer 1

Acabo de probar que el uso de la notación @import funciona:

<style>
@import ''https://fonts.googleapis.com/css?family=Montserrat'';
</style>

Estoy usando la versión 2.0.3 de django-wkhtmltopdf

Answer 2

Asegúrese de no declarar con qué fuente está imprimiendo en su hoja de estilos de impresión.

Answer 3

Debo haber intentado una gran cantidad de variaciones para obtener este trabajo (del local). Estoy intentando incrustar Open Sans Condensed en un pdf a través de WKHtmlToPdf.

Creo que es importante que descargue e instale el Open Sans Condensed ttf directamente desde Google y lo instale. También es importante reiniciar para permitir el acceso de otros servicios después de la instalación. Originalmente descargué el ttf de font-squirrel y condensé fue catalogado como "Open Sans" en windows / fonts, lo cual es incorrecto. Si cuidas la instalación de Google, aparece como "Open Sans Condensed Light", por lo que incluso el local(''Open Sans Cond Light'') de google local(''Open Sans Cond Light'') script local(''Open Sans Cond Light'') está mal.

Como se mencionó anteriormente, debe ser explícito con el estiramiento y los pesos, así que esto es lo que me ha funcionado:

    @font-face { 
     font-family: ''Open Sans''; 
     font-style: normal; 
     font-weight: 400; 
     src: local(''Open Sans'');
    }

    @font-face { 
     font-family: ''Open Sans Condensed''; 
     font-stretch:condensed; 
     font-style: normal; 
     font-weight: 300; 
     src: local(''Open Sans Condensed Light'');
    }

@@font-face { font-family: ''Open Sans Condensed Bold''; font-stretch:condensed; font-style: normal; font-weight: 700; src: local(''Open Sans Condensed''), local(''Open Sans Condensed Bold'');}

Answer 4

En mi caso solo tuve que añadir esta opción.

--javascript-delay 1000

y el texto de Google Font comenzó a aparecer.

[wkhtmltopdf 0.12.4 (con qt parcheado)]

Answer 5

He estado luchando con esto por cerca de dos días, mi consejo si ninguna de las respuestas anteriores funciona para ti:

Instale la fuente (ttf) en la máquina que aloja el servidor web y solo solicítela en el css como lo haría con una fuente común.

body{
    font-family: ''Lato'';
}

Ahora wkhtmltopdf debería poder incluir la fuente

Answer 6

Tuve el mismo problema y lo resolví descargando las fuentes y ejecutándolas desde un archivo local en mi servidor web con esta declaración de fuente:

@font-face {
    font-family: ''PT Sans'';
    src: url( ''/public/inc/fonts/PTS55F-webfont.eot'');
    src: url( ''/public/inc/fonts/PTS55F-webfont.eot?#iefix'') format(''embedded-opentype''),
         url( ''/public/inc/fonts/PTS55F-webfont.woff'') format(''woff''),
         url( ''/public/inc/fonts/PTS55F-webfont.ttf'') format(''truetype'');
    font-weight: normal;
    font-style: normal;
}

Pude encontrar esta fuente en Font Squirrel , pero su kilometraje puede variar.

Creo que lo que sucede con las fuentes de Google es que está intentando cargar solo el formato que cree que quiere este navegador, que para WebKit es woff (creo). Pero wkhtmltopdf no puede incrustar una fuente woff en un PDF, y por eso vuelve a ser sans-serif. Al declararlos a todos, se incluye la fuente TrueType, que es lo que realmente utiliza el PDF.

Además, debe definir la fuente que desea utilizar como la primera en cualquier definición de CSS de la familia de fuentes o wkhtmltopdf simplemente la ignorará.

Answer 7

Una solución simple: Base64 codifica tu fuente y la incrusta en el CSS:

@font-face {
    font-family: ''OpenSans'';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}

FontSquirrel puede hacer esto por usted a través de las opciones avanzadas de su Generador Webfont ; Google y otras fuentes se pueden codificar con esta herramienta .

He usado esta solución con pdfkit y wicked_pdf , que funcionan a través de wkhtmltopdf, así que supongo que esto debería funcionar también con el wkhtmltopdf nativo.

Answer 8

Para convertir HTML a PDF por wkhtmltopdf intente evitar la fuente woff . Utilice el formato truetype de las Google Web Fonts con la codificación base64 .

Recientemente intenté usar una fuente web de Google de Google Web Fonts. En el navegador se muestra correctamente pero no se muestra después de convertir HTML a PDF.

Después de buscar extensamente en la web, por fin, encontré herramientas para codificar fuentes al formato base64 y también obtuve CSS para @font-face .

Lea la solución here .