Base64 @font-face Font with wicked_pdf Generator

Question

I am trying to use a specific font in an HTML to PDF generated PDF file using wicked_pdf on a Rails 3 site. I have found other advice on here which I followed. The only thing that (mostly) worked for me was converting the fonts to base64. I found the original answer here: Wicked PDF +fonts+heroku+rails3.2

I had to put the @font-face CSS directly into the partial file that was using it instead of putting it into a style sheet in order for it to work. It works fine in my local copy now. When I deploy it to our staging server, it only half works. One of the fonts loads, but the bold version of the font does not load.

Here is the @font-face CSS I included in the partial (this pastebin includes the entire Base64 code in the off-chance that it's useful):

<style type="text/css">
  @font-face {
    font-family: 'MuseoSans300';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQAABAA...excess text removed);
  }
  @font-face {
    font-family:'MuseoSans700';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQAABAA...excess text removed);
  }
</style>

The styles from the regular style sheet (using SASS) which use these fonts look something like this:

#profile_pdf {
  font-family: 'MuseoSans300';
  h1 {
    font-size: 30px;
    font-family: 'MuseoSans700';
  }
  h2 {
    font-size: 20px;
    font-family: 'MuseoSans300';
  }
}

I've tried changing this a variety of ways. I used the same formatting as this advice: http://blog.shahariaazam.com/use-google-web-fonts-for-wkhtmltopdf-tools/#.UtwZUmQo5hE

That made it just stop working entirely.

With the formatting I showed above, it does work on my locally run copy. On the staging server only one of the fonts works; it loads everything in just the 300 version and the 700 version doesn't load. Has anyone else run into this problem?

Answer 1

I had a similar problem with Wicked PDF. The way I solved it was by defining a font family with every weight I wanted to target. It looked like so:

@font-face {
  font-family: 'Karla';
  font-weight: 400;
  font-style: normal;
  src: ...;
}

@font-face {
  font-family: 'Karla-Bold';
  font-weight: 700;
  font-style: bold;
  src: ...;
}

I believe you need to specify the font weight number explicitly to get it to properly show the bold version. My problem was identical to yours and this fixed it for me.