Веб-шрифты Google и генерация PDF из HTML с помощью wkhtmltopdf

Я использую wkhtmltopdf для преобразования файлов HTML в формате PDF; он дает удивительно хорошие результаты, делая PDF в точности так, как это делает WebKit.

Я использую Google Web Fonts, чтобы дать пользователям возможность настроить внешний вид документа, который они редактировали, предлагая им возможность выбирать между несколькими шрифтами. Он также отлично работает в браузере.

Проблема заключается в том, что я не использую Google Fonts при преобразовании таких файлов HTML в PDF с помощью wkhtmltopdf. Я читал, что у других людей было то же самое issue.

Может кто-нибудь, пожалуйста, помогите мне исправить это?

EDIT: объявление @font-face непосредственно в CSS тоже не работает.

Ответ 1

Чтобы преобразовать HTML в PDF с помощью wkhtmltopdf, попробуйте избежать шрифта woff. Используйте truetype формат Google Web Fonts с кодировкой base64.

Недавно я попытался использовать веб-шрифт Google из Google Web Fonts. В браузере он отображается правильно, но он не отображается после преобразования HTML в PDF.

После длительного поиска в Интернете я нашел инструменты для кодирования шрифтов в формате base64, а также CSS для @font-face.

Прочтите решение здесь.

Ответ 2

Простое решение: Base64-кодируйте свой шрифт и вставляйте его в CSS:

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

FontSquirrel может сделать это за счет расширенных опций Webfont Generator; Google и другие шрифты могут быть закодированы с помощью этого инструмента.

Я использовал это решение с pdfkit и wicked_pdf, которые работают через wkhtmltopdf, поэтому я предполагаю, что это должно работать с нативным wkhtmltopdf.

Ответ 3

У меня была такая же проблема, и я решил ее загрузить, загрузив шрифты и запустив локальный файл на моем веб-сервере с этим объявлением 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;
}

Мне удалось найти этот шрифт на Font Squirrel, но ваш пробег может отличаться.

Я думаю, что то, что происходит с шрифтами Google, заключается в том, что он пытается загрузить только тот формат, который, по его мнению, нужен браузеру, который для WebKit является woff (я считаю). Но wkhtmltopdf не может встроить шрифт woff в PDF, и поэтому по умолчанию возвращается sans-serif. Объявив все из них, включен шрифт TrueType, который фактически использует PDF.

Кроме того, вам нужно определить шрифт, который вы хотите использовать в качестве первого в определении CSS любого шрифта, или wkhtmltopdf просто проигнорирует его.

Ответ 4

Я, должно быть, попробовал газиллионные вариации, чтобы получить эту работу (от локальных). Я пытаюсь получить Open Sans Condensed встроенным в pdf через WKHtmlToPdf.

Я думаю, что очень важно загрузить и установить Open Sans Condensed ttf прямо из Google и установить его. Также важно перезагрузиться, чтобы разрешить другим службам доступ после установки. Я загрузил ttf из font-squirrel изначально, и сжатый был указан как "Open Sans" в windows/fonts, что неверно, если вы посмотрите на установку Google, он указан как "Open Sans Condensed Light", поэтому даже google local('Open Sans Cond Light') script неверен.

Как уже упоминалось ранее, вам нужно быть явным с растяжкой и весами, поэтому это то, что сработало для меня:

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

Ответ 5

Я только что проверил, что с использованием нотации @import работает:

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

Я использую django-wkhtmltopdf версию 2.0.3

Ответ 6

Убедитесь, что вы не объявляете, какой шрифт вы печатаете в таблице стилей печати.

Ответ 7

Я боролся с этим в течение двух дней, мой совет вам, если ни один из ответов выше не работает для вас:

Установите шрифт (ttf) на машине, на которой размещен веб-сервер, и просто требуйте его в css, как если бы вы использовали обычный шрифт.

body{
    font-family: 'Lato';
}

Теперь wkhtmltopdf должен быть включен шрифт