I am trying to use custom fonts in my PDF generated with wkhtmltopdf. I read that you can't use google webfonts and that wkhtmltopdf uses truetype .ttf file. Can anyone confirm that? So I downloaded a .ttf file from google webfont and put in on my server, then used the font face:
@font-face { font-family: Jolly; src: url('../fonts/JollyLodger-Regular.ttf') format('truetype'); }
and font family:
<style type = "text/css"> p { font-family: 'Jolly', cursive; } </style>
And now the text that is supposed to render with Jolly Lodger font doesn't appear at all, page is blank.
What am I doing wrong?
PS: I tried with different .ttf files.
Importing Your Web Font After you extract the zip file you generated above (or if you already have a webfont), right click the Fonts group in Bootstrap Studio and choose Import Webfont . In the file browser, navigate to the webfont and select the css file in the folder.
Since it is a Google Web font you need not to write @font-face
in you style sheet just use following link tag in your source code:
<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>
and
<style type = "text/css"> p { font-family: 'Jolly Lodger', cursive; } </style>
will work.
By the way, in your code you are defining @font-face
family as font-family: Jolly;
and using it as p { font-family: 'Jolly Lodger', cursive; }
that is wrong, because it's mismatching font-family name.
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