para - fuentes personalizadas css

usar fuentes personalizadas con wkhtmltopdf

Question

Estoy tratando de usar fuentes personalizadas en mi PDF generado con wkhtmltopdf. Leí que no puedes usar las fuentes web de Google y que wkhtmltopdf usa el archivo .ttf de truetype. ¿Alguien puede confirmar eso? Así que descargué un archivo .ttf de google webfont y lo puse en mi servidor, luego usé la fuente:

 @font-face {
font-family: Jolly;
src: url(''../fonts/JollyLodger-Regular.ttf'') format(''truetype'');
}

y familia de fuentes:

 <style type = "text/css">
p { font-family: ''Jolly'', cursive; }
</style>

Y ahora el texto que se supone que se representa con la fuente Jolly Lodger no aparece en absoluto, la página está en blanco.

¿Qué estoy haciendo mal?

PD: lo intenté con diferentes archivos .ttf.

Answer 1

Después de hacer todas las soluciones sugeridas (algunas que realmente funcionaron), encontré una solución mucho más sencilla:

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

Simplemente puede usar la notación @import para incluir la fuente.

Answer 2

Encontré que la solución de Arman H. (base64 que codifica las fuentes) sobre esta pregunta funcionó a la perfección : Google Web Fonts y generación de PDF a partir de HTML con wkhtmltopdf

Answer 3

Estoy apostando a que está llamando a wkhtmltopdf desde un contenedor web utilizando IIS. Es por eso que algunas personas están diciendo que sí les funciona. Probablemente están llamando a wkhtmltopdf desde la línea de comandos, en cuyo caso puede resolver enlaces relativos en CSS URL () s, pero si lo está llamando desde snappy o similar, puede solucionar el problema especificando una URL como, por ejemplo, URL(''http://localhost/myfolder/fonts/JollyLodger-Regular.ttf'') lugar.

La incapacidad de resolver correctamente los enlaces relativos en las etiquetas URL de CSS () parece estar rota en wkhtmltopdf 0.11.0_rc1 pero algunas versiones anteriores podrían funcionar bien. El mismo problema ocurre con otras etiquetas CSS URL () como cuando se llama una imagen de fondo: la resolución de la ubicación del archivo no funciona. Sin embargo, es interesante que, en el caso de las imágenes, si utiliza <IMG SRC=> , 0.11.0_rc1 puede encontrar el archivo, incluso si se proporciona una ruta relativa. El problema parece estar limitado a las etiquetas URL () dentro de CSS.

EDITAR: Descubrí que si usa file:/// con todas las barras diagonales en la ruta, entonces funciona. En otras palabras, la URL(''file:///D:/InetPub/wwwroot/myfolder/fonts/JollyLodger-Regular.ttf'') debería funcionar.

Answer 4

Personalmente tuve que configurar la familia de fuentes en un div (inicialmente quería un span )

<style>
@font-face {
font-family: ''CenturyGothic'';
src: url("fonts/century-gothic.ttf") format(''truetype'');
}
.title {
font-family: ''CenturyGothic'', sans-serif;
font-size: 22pt;
}
</style>
...
<div class="title">This is Century Gothic</div>

Answer 5

Si tiene un archivo .ttf o un archivo .woff, use la siguiente sintaxis

@font-face {
font-family: ''Sample Name'';
src: url(/PathToFolderWhereContained/fontName.ttf) format(''truetype'');
}

no use ttf que no funcionará, use el nombre completo ''truetype'' y si tiene .woff, use ''woff'' en formato. Para mi caso funcionó.

Sin embargo, la mejor práctica es utilizar los enlaces a la API de fuentes de Google que es mejor si no se ajustan a sus criterios, luego use esta técnica anterior que funcionará

Answer 6

También agregaré mi respuesta aquí, en caso de que alguien la necesite.

He estado usando Rotativa que se basa en wkhtmltopdf, y lo que terminé usando fue lo siguiente:

@font-face {
font-family: "testfont";
src: url("/UI/Fonts/609beecf-8d23-4a8c-bbf5-d22ee8db2fc9.woff") format("woff"),
url("/UI/Fonts/1cd9ef2f-b358-4d39-8628-6481d9e1c8ce.svg#1cd9ef2f-b358-4d39-8628-6481d9e1c8ce") format("svg");
}

... y parece que Rotativa está recogiendo la versión SVG. Si los reordeno todavía funcionan, pero si elimino la versión SVG, deja de funcionar.

Podría valer la pena un tiro. Sin embargo, no puedo encontrar una buena documentación sobre por qué esto es así.

Answer 7

Ya que es una fuente de Google Web, no necesita escribir @font-face en su hoja de estilo, solo use la siguiente etiqueta de enlace en su código fuente:

<link href=''http://fonts.googleapis.com/css?family=Jolly+Lodger'' rel=''stylesheet'' type=''text/css''>

y

 <style type = "text/css">
p { font-family: ''Jolly Lodger'', cursive; }
</style>

trabajará.

Por cierto, en tu código estás definiendo @font-face family como font-family: Jolly; y usándolo como p { font-family: ''Jolly Lodger'', cursive; } p { font-family: ''Jolly Lodger'', cursive; } eso es incorrecto, porque no coincide el nombre de la familia de fuentes.

Answer 8

Como lo mencionó Yardboy , encontramos que la codificación base64 de la fuente TrueType en nuestro CSS funciona bien. Pero quería compartir algunas ideas adicionales.

Usamos 4 fuentes personalizadas, todas denominadas de forma única ''Light'' ''Medium'' etc.

Yo uso el kit de herramientas openssl para codificar en base64 con buenos resultados. Pero también puedes usar fontsquirrel . Solo asegúrese de eliminar todos los demás tipos de fuente ( ''woff'' ''otf'' ..). Encontramos que el uso de truetype funcionó exclusivamente de forma misteriosa.

Codificar archivo, recortar salida y agregar al portapapeles

openssl base64 -in bold.ttf | tr -d ''/n'' | pbcopy

En Windows debes instalar openssl y agregarlo a la ruta luego

openssl base64 -in bold.ttf | tr -d ''/n'' | clip

o simplemente usar este tipo de sitios web

Añadir a la fuente de la fuente CSS

 @font-face {
font-family: ''Bold'';
font-style: normal;
font-weight: normal;
src: url(data:font/truetype;charset=utf-8;base64,BASE64...) format("truetype");
}

La salida renderizada dependerá de su versión y sabor de wkhtmltopdf . Debido a que nuestros servidores ejecutan Debian y yo desarrollamos en OSX que probé en una máquina virtual localmente.