How to embed fonts with PDKFit and asset pipeline in Rails

Question

Until I started using PDFKit to create PDFs from HTML in Rails, I was successfully embedding Google Fonts like this:

= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Rokkitt:400,700'

However, PDFKit was not embedding fonts in my PDFs. It generated the PDFs and formatted the using my print stylesheet, but using regular fonts, not my embedded ones.

So, I put EOT, WOFF, TTF and SVG versions of each font in /app/assets/fonts and switched to this format in a new font stylesheet called by my screen and print stylesheets:

@font-face {
    font-family: 'rokkittregular';
    src: font-url('rokkitt-regular-webfont.eot');
    src: local('rokkittregular')
         font-url('rokkitt-regular-webfont.eot?#iefix') format('embedded-opentype'),
         font-url('rokkitt-regular-webfont.woff') format('woff'),
         font-url('rokkitt-regular-webfont.ttf') format('truetype'),
         font-url('rokkitt-regular-webfont.svg#rokkittregular') format('svg');
    font-weight: normal;
    font-style: normal;}

Again, this worked just fine for my regular HTML pages. Again, PDFKit didn't embed the fonts in my PDFs.

Assuming this probably has something to do with PDFKit not being able to find the fonts, I created a separate print-fonts stylesheet to be embedded in my print stylesheet. In it, I switched to this notation:

@font-face {
    font-family: "rokkittregular";
    src: url("/assets/rokkitt-regular-webfont.eot");
    src: url("/assets/rokkitt-regular-webfont.eot?#iefix") format("embedded-opentype"),
         url("/assets/rokkitt-regular-webfont.woff") format("woff"),
         url("/assets/rokkitt-regular-webfont.ttf") format("truetype"),
         url("/assets/rokkitt-regular-webfont.svg#rokkittregular") format("svg");
    font-weight: normal;
    font-style: normal;}

And later to this notation:

@font-face {
    font-family: "rokkittregular";
    src: url("#{Rails.root}/assets/rokkitt-regular-webfont.eot");
    src: url("#{Rails.root}/assets/rokkitt-regular-webfont.eot?#iefix") format("embedded-opentype"),
         url("#{Rails.root}/assets/rokkitt-regular-webfont.woff") format("woff"),
         url("#{Rails.root}/assets/rokkitt-regular-webfont.ttf") format("truetype"),
         url("#{Rails.root}/assets/rokkitt-regular-webfont.svg#rokkittregular") format("svg");
    font-weight: normal;
    font-style: normal;}

Still it didn't work.

The strange thing is if you point your browser at http://localhost:5000/assets/rokkitt-regular-webfont.eot, it takes you to the font file.

How can I get these fonts working in PDFKit?

Answer 1

The solution was to change how I called the fonts in my print stylesheet:

h1 {font-family: "rokkittregular";}

not

h1 {font-family: "Rokkitt", serif;}