Search code examples
htmlcssfontsdrupal-7wkhtmltopdf

Drupal wkhtmltopdf font error

image showing the error I am using the wkhtmltopdf library within Drupal. The issue I am experiencing is how the fonts are displaying in a PDF view. Each time I convert a HTML page to PDF. The PDF text (p tags) are displayed in the wingdings font.

In the image I've attached above you will see a PDF view showing the p tags in wingdings and the h1 and h2 text is displayed in droid serif.

Having played around with the CSS, I have strangely managed to work out that if I change the font weight to 600 and over the font displays in the PDF view. This is why the h1 + h2 text is being displayed.

My CSS is pretty basic 

body, p, p a {
  font-family: "Droid Serif", "Georgia", serif;
  font-style: normal;
  font-weight: 400;
  }
Solution

  • I understand that the fonts being used, were not being recognized in the PDF view. So I researched into why the font styles were displaying in the converted PDF’s. I decided to follow this [fix][1 font not working in wkhtmltopdf].

    In this solution it mentions encoding fonts using Base64 and then using it with the CSS. I tried various methods for encoding the font types to Base64 and adding them within the style sheet. All my attempts at this seemed to fail.

    So I gave up on that and I decided to look into using Google Fonts. I went over to the Google Fonts page. Reading through how it works, I worked out the following css rule;

    @import url(//fonts.googleapis.com/css?family=Droid+Serif|Georgia:400);
  body, p, p a {
  font-family: "Droid Serif", "Georgia", serif;
  }

    The CSS rule snippet give's me my desired outcome. The font appears to have not been compromised and it looks exactly like the original webpage. Which is what I was looking for :>)