html - tarjetas - tipografia juvenil

La fuente helvetica no funciona en wkhtmltopdf

Question

He estado tratando de usar la fuente Helvetica al crear el pdf, pero la fuente no se refleja en el pdf.

Hice algunos google y encontré algunas soluciones pero ninguna es viable.

Solución probada 1

Encontré algo similar aquí: problema de fuente

Probé la última solución mencionada allí.

la solución es definir @ font-face en su css y tener un enlace src a un host externo al que pueda acceder wkhtmltopdf

Pero la solución no está funcionando.

Probé la Solución 2 También intenté usar la API de Google Font, pero el resultado aún no es viable. fuente helvetica

Aquí hay un ejemplo de ejemplo de fuente personalizada

Probé la Solución 3 Intenté hacerlo usando la propiedad css @page. Pero eso tampoco está funcionando.

¿Cuál es el enfoque para una solución viable?

Answer 1

La forma más fácil de solucionar los problemas de fuente de wkhtmltopdf es codificar en base64 la fuente ( puede usar esta herramienta ) e incluirla en su CSS:

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

Esto funciona con todas las fuentes (incluidas las fuentes de Google) y garantiza la compatibilidad multiplataforma en diferentes máquinas y sistemas operativos.

Answer 2

Para agregar a la refriega, usando wkhtmltopdf 0.12.1 (with patched qt) en Linux esto funcionó para mí:

@font-face {
    font-family: dejaSansMono;
    src: url(''file:///usr/share/fonts/dejavu/DejaVuSansMono.ttf'');
} 

Es decir, especificando la ruta al .ttf . El solo hecho de nombrar una familia de fuentes, cualquier familia de fuentes, no funcionó incluso si lo hizo en el navegador.

Answer 3

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

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

Luego, después de buscar un montón en la web, encontré herramientas para codificar fuentes en formato codificado en base64 y también obtuve CSS para @ font-face .

Answer 4

Para mí, cargar fuentes de Google Fonts no funcionó. Y poner el binario base64ed en un archivo CSS parece demasiado para mí (los tipos coreanos son de varios megabytes). Recomiendo instalar las fuentes que necesita usar en la máquina. Para Ubuntu, simplemente puede descargar los archivos de fuentes de Google Fonts y copiarlos en el directorio $HOME/.fonts y ejecutar el comando fc-cache en la línea de comandos para reconstruir la lista de fuentes.

$ mkdir ~/.fonts
$ copy your-font-file.ttf ~/.fonts/
$ fc-cache -fv

Para una aplicación Rails puedes symlink

$ ln -s /your/app/root/assets/fonts ~/.fonts

Entonces podrás listar todas las fuentes disponibles.

$ fc-list
Nimbus Sans L:style=Regular Italic
URW Palladio L:style=Roman
Century Schoolbook L:style=Bold Italic
Nimbus Sans L:style=Bold
URW Chancery L:style=Medium Italic
Nimbus Roman No9 L:style=Regular
Century Schoolbook L:style=Bold
Century Schoolbook L:style=Italic
Nimbus Sans L:style=Regular
....

Answer 5

Tuve el mismo problema con PT Sans de google. Lo que funcionó para mí fue el siguiente proceso:

1. Descargue PT Sans de Google y fontsquirrel través del generador de fontsquirrel
2. Coloque el @ font-face (solo usé el ttf) en el css (en mi caso estaba en la cabeza html de un archivo php)

Tenga en cuenta que no usé base64 y funcionó como se esperaba.

Espero eso ayude

Answer 6

expansión de la respuesta de baxangs para usuarios de linux (x64): instala el archivo de fuente ttf en / usr / share / fonts / font-folder / font-name

y luego en su archivo css use el nombre de la fuente que figura en la lista de fc, no necesita usar @ font-face, solo use el nombre de la fuente en su css

ejemplo Verdana.ttf ======

Copie desde la máquina local al servidor en /usr/share/fonts/Verdana/Verdana.ttf

fc-list para obtener el nombre de la fuente (lo más probable es que sea Verdana)

Luego use en su css P {font-family: ''Verdana''}

¡y eso es! Me tomó un tiempo arreglarlo.