自定义字体在使用 WKHTMLTOPDF 库生成的 PDF 中不起作用

Question

I am using Laravel 5.1 SnappyPDF wrapper, which is using WKHTMLTOPDF library. I am trying to include some custom google fonts for my PDF file, but those fonts are not working in generated PDF file.

I tried, converting fonts into Base64 and also tried to include fonts by absolute URL and relative URL, also tried many answers available at stack overflow but none of them worked for me. How to fix this issue.

//Calling fonts
@font-face {
    font-family: Roboto Condensed;
    src: url("/fonts/RobotoCondensed-Regular/RobotoCondensed-Regular.ttf");
}
@font-face {
    font-family: 'Open Sans';src: url("/fonts/OpenSans/OpenSans-Regular.ttf");
}

@font-face {
    font-family: 'Open Sans Semi Bold Italic';
    src: url("/fonts/OpenSans/OpenSans-SemiboldItalic.ttf");
}

 //implenting fonts
.report-page2-col-wrapper .col-heading{
    font-family:"Open Sans Semi Bold Italic";
    font-size:12pt;
    line-height:17pt;
}

see difference in screen shots

1) This is web browser HTML version, looks find and fonts implementing properly

---

2) This is Generated PDF version, fonts not applying properly

---

Answer 1

There are multiple solutions to accomplish this:

1) If you use google font, try below: Use <link> to include google font

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

Use <style> to apply font effect

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

2) Encode font with Base64 encode tool and use it in css

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

Hope one of the above is your solution!

Taken ref: use custom fonts with wkhtmltopdf , helvetica font not working in wkhtmltopdf

Answer 2

除了 AddWeb 之外，您还必须将带有 unicode 信息的 HTML 标头 META 添加到

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">