PDFKit doesn't display custom font - ruby-on-rails-4

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'; }