Google Web Fonts und PDF-Erzeugung aus HTML mit wkhtmltopdf

Question

Ich verwende wkhtmltopdf um HTML-Dateien in das PDF-Format zu konvertieren. Die Ergebnisse sind erstaunlich gut, da die PDF-Datei genau so gerendert wird, wie es WebKit tun würde.

Ich verwende Google Web-Schriftarten um den Benutzern die Möglichkeit zu geben, das Erscheinungsbild des von ihnen bearbeiteten Dokuments anzupassen, indem sie die Möglichkeit haben, zwischen mehreren Schriftarten zu wählen. Es funktioniert auch perfekt in einem Browser .

Das Problem ist, dass ich die Google-Schriftarten nicht zum Laufen bekomme, wenn ich solche HTML-Dateien mit wkhtmltopdf in PDF konvertiere. Ich habe gelesen, dass andere Leute das gleiche Problem hatten Ausgabe .

Kann mir jemand helfen, das Problem zu lösen?

EDIT : Die Deklaration von @font-face direkt im CSS funktioniert ebenfalls nicht.

Answer 1

Ich kämpfe jetzt seit etwa zwei Tagen mit diesem Problem. Mein Rat an Sie, wenn keine der obigen Antworten für Sie funktioniert:

Installieren Sie die Schriftart (ttf) auf dem Rechner, der den Webserver hostet, und fordern Sie sie einfach in der CSS-Datei an, wie Sie es mit einer gewöhnlichen Schriftart tun würden.

body{
    font-family: 'Lato';
}

Jetzt wkhtmltopdf sollte die Schriftart enthalten können

Answer 2

In meinem Fall musste ich nur diese Option hinzufügen

--javascript-delay 1000

und der Google Font-Text wird angezeigt.

[wkhtmltopdf 0.12.4 (mit gepatchtem qt)]

Answer 3

Bei mir funktioniert das wie folgt. Beachten Sie die Einbeziehung der erweiterten Zeichensätze (falls Sie sie benötigen):

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese);
</style>

Answer 4

Vergewissern Sie sich, dass Sie in Ihrem Druck-Stylesheet nicht die Schriftart angeben, mit der Sie drucken wollen.

Answer 5

Die Verwendung von @import war der Schlüssel zum Funktionieren von Google Fonts mit wkhtmltopdf, aber dann hatte ich Probleme mit CJK-Zeichen (Chinesisch, Japanisch und Koreanisch), die nicht angezeigt wurden. Die Lösung war der Wechsel zu Version 2 der Google Font API ( https://fonts.googleapis.com/css2 ).

Nachfolgend finden Sie den Codeschnipsel, den ich in meinen HTML-Code eingefügt habe, um alle Sprachen, die ich benötigte, über ein Test-PDF zu unterstützen. Beachten Sie die Auswirkungen auf die Leistung, die das Laden von Dutzenden von entfernten Schriftarten hat.

<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans";
[lang="sq"] {font-family: 'Noto Sans', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic";
[lang="ar"] {font-family: 'Noto Sans Arabic', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali";
[lang="bn"] {font-family: 'Noto Sans Bengali', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian";
[lang="ka"] {font-family: 'Noto Sans Georgian', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Gujarati";
[lang="gu"] {font-family: 'Noto Sans Gujarati', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew";
[lang="he"] {font-family: 'Noto Sans Hebrew', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari";
[lang="hi"] {font-family: 'Noto Sans Devanagari', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Serif+Tibetan";
[lang="bo"] {font-family: 'Noto Serif Tibetan', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Gurmukhi";
[lang="pa"] {font-family: 'Noto Sans Gurmukhi', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu";
[lang="ur"] {font-family: 'Noto Nastaliq Urdu', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Tai+Viet";
[lang="vi"] {font-family: 'Noto Sans Tai Viet', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC";
[lang="zh-hans"] {font-family: 'Noto Sans SC', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC";
[lang="zh-hant"] {font-family: 'Noto Sans TC', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP";
[lang="ja"] {font-family: 'Noto Sans JP', sans-serif !important;}
</style>
<style>
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+KR";
[lang="ko"] {font-family: 'Noto Sans KR', sans-serif !important;}
</style>