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?

Conviction

What is different about your development and staging environments? Meaning... if it works in development, you likely have everything set up correctly. Maybe the staging env just needs some tweaking. – Anarchy

I'm having the exact same issue, is your staging env on Heroku per chance? – Salinasalinas

i think this has something to do with precompiling of the assets. if you precompile locally do you replicate the staging issue? It did for me. – Salinasalinas

Is it works on localhost? – Thalamencephalon

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.

Lofton

font-style: bold; - really? – Lardon

Answer 2

I think in the url part, it should be /assets/..... instead of /font if your your placing them under assets since rails compile everything into assets

Loraleeloralie