web-dev-qa-db-fra.com

Google Web Fonts et PDF génération de HTML avec wkhtmltopdf

J'utilise wkhtmltopdf pour convertir les fichiers HTML au format PDF; il donne des résultats étonnamment bons, rendant le PDF exactement comme le ferait WebKit.

J'utilise Google Web Fonts pour donner aux utilisateurs la possibilité de personnaliser l'apparence du document qu'ils ont modifié, en leur offrant la possibilité de choisir entre quelques polices. Cela fonctionne aussi parfaitement dans un navigateur.

Le problème, c'est que les polices Google ne fonctionnent pas lors de la conversion de tels fichiers HTML en PDF avec wkhtmltopdf. J'ai lu que d'autres personnes avaient le même numéro .

Quelqu'un pourrait-il m'aider s'il vous plaît résoudre ce problème?

EDIT: déclarer @ font-face directement dans le CSS ne fonctionne pas non plus.

htmlcsswkhtmltopdfgoogle-font-api
54
Mathieu Rodic

Pour convertir le code HTML en PDF de wkhtmltopdf, essayez d’éviter les polices woff. Utilisez le format truetype du Google Web Fonts avec le code base64.

Récemment, j'ai essayé d'utiliser une police Web Google à partir de Google Web Fonts. Dans le navigateur, cela s’affiche correctement, mais pas après la conversion de HTML en PDF.

Après avoir longuement cherché sur le Web, enfin, j'ai trouvé des outils pour coder les polices au format base64 et également obtenu CSS pour @font-face.

Lire la solution ici .

44
Shaharia Azam

Une solution simple: Encodez votre police en Base64 et intégrez-la dans le CSS:

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

FontSquirrel peut le faire pour vous grâce aux options avancées de leur Webfont Generator ; Google et d'autres polices peuvent être encodés avec cet outil .

J'ai utilisé cette solution avec pdfkit et wicked_pdf, qui fonctionnent via wkhtmltopdf. Je suppose donc que cela devrait également fonctionner avec la variable native wkhtmltopdf.

28
Arman H

J'ai eu le même problème et je l'ai résolu en téléchargeant les polices et en l'exécutant à partir d'un fichier local de mon serveur Web avec cette déclaration font-face:

@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;
}

J'ai pu trouver cette police sur Font Squirrel , mais votre kilométrage peut varier.

Je pense que ce qui se passe avec les polices de Google, c'est qu'il essaie de charger uniquement le format qu'il pense que ce navigateur veut, qui pour WebKit est woff (je crois). Mais wkhtmltopdf ne peut pas incorporer de police woff dans un fichier PDF, et renvoie donc par défaut à sans-serif. En les déclarant tous, la police TrueType est incluse, ce que le PDF utilise réellement.

En outre, vous devez définir la police que vous souhaitez utiliser comme première dans une définition CSS de famille de polices, sinon wkhtmltopdf l'ignorera.

13
Joseph Erickson

Je viens de tester cela en utilisant la @importnotation:

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

J'utilise Django-wkhtmltopdf version 2.0.3

5
guival

Cela fait environ deux jours que je me bats avec cela, je vous conseille si aucune des réponses ci-dessus ne vous convient:

Installez la police (ttf) sur la machine qui héberge le serveur Web et exigez-la dans le fichier css, comme vous le feriez avec une police commune.

body{
    font-family: 'Lato';
}

Maintenant, wkhtmltopdf devrait pouvoir inclure la police

2
San Bluecat

Je dois avoir essayé un gazillion de variations pour obtenir ce travail (du local). J'essaie d'intégrer Open Sans Condensed à un fichier PDF via WKHtmlToPdf.

Je pense qu'il est important de télécharger et d'installer Open ttf Open Sans Condensed directement à partir de Google et de l'installer. Il est également important de redémarrer pour autoriser l'accès à d'autres services après l'installation. J'ai téléchargé le fichier ttf à partir de font-squirrel à l'origine et condensé était répertorié comme "Open Sans" dans windows/fonts, ce qui est faux, si vous prenez en charge l'installation de Google, il est répertorié sous le nom "Open Sans Condensed Light". Même le script local('Open Sans Cond Light') de Google est faux. 

Comme mentionné précédemment, vous devez être explicite avec l'étirement et les poids, voici ce qui a fonctionné pour moi:

    @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');}
2
jenson-button-event

Dans mon cas il me suffisait d'ajouter cette option

--javascript-delay 1000

et le texte de Google Font a commencé à apparaître.

[wkhtmltopdf 0.12.4 (avec qt corrigé)]

1
xtian

Assurez-vous que vous ne déclarez pas quelle police vous imprimez dans votre feuille de style d'impression.

0
Andres Ilich