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
The summary: Markdown to PDF supports all fonts in the Google fonts library, plus a couple PDF-common fonts like Helvetica and Times New Roman. HTML to PDF supports custom fonts via the CSS @import directive and CSS's @font-face directive.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With