Custom fonts not working in Generated PDF using WKHTMLTOPDF Library

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

---

Rede

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

Bdellium

Glad to help you...! – Bdellium

What if you're not using a Google font? The Base64 method did not work for me. – Doings

Method 2 worked for me, thanks – Quarrel

Answer 2

In addition to AddWeb, you have to add to HTML header META with unicode information

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

Underproduction