PDFKit doesn't display custom font

Question

I am trying to use a custom font in a pdf I generate from html with PDFKit in my Rails app. I added the font in ...app/assets/fonts/ and included it in my html template:

css:
  @font-face {
    font-family: 'journal';
    src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.eot')});
    src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.woff')} format("woff")),
         url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.ttf')}) format("truetype");
  }

called it in the css:

h1 {font-family: journal; }

Answer 1

don't use ; unless you're done declaring the rule. The universal CSS formatting here is:

selector {
  propname: val1, val2, val3;
}

So you use , for multiple values, and then only at the very end a ;. What you've written instead does this:

selector {
  src: some value;
  src: some *overwriting* value;
}

Just declare your @font-face using the regular format and it should work fine:

@font-face {
  font-family: 'journal';
  src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.eot')}),
       url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.woff')}) format("woff")),
       url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal.ttf')}) format("truetype");
  }

(note that you were also missing a ) for the "woff" case)

However, if you're targetting modern browsers, there is no reason to use eot anymore. IE9+ and everything else supports woff just fine. In fact, WOFF is a compressed opentype wrapper; browsers that support opentype also support WOFF, so trying to load both WOFF and ttf or otf makes no sense: see http://caniuse.com/woff

Answer 2

@font-face {
     font-family: 'journalregular';
     src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.eot')});
 }

@font-face {
     font-family: 'journalregular';
     src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.woff')}) format('woff');
 }

@font-face {
     font-family: 'journalregular';
     src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.ttf')}) format('truetype');
 }

@font-face {
     font-family: 'journalregular';
     src: url(file://#{Rails.root.join('app', 'assets', 'fonts', 'journal-webfont.svg#journalregular')}) format('svg');
}

@font-face {
     font-family: 'journalregular';
     font-weight: normal;
     font-style: normal;
}

That seemed to fix it. Also, I needed to call it:

h1 { font-family: 'journalregular'; }