Search code examples
ruby-on-railswicked-pdfwicked-gem

Wicked PDF - showing fontawesome icons as square box

I am using wicked-pdf gem (v1.2.2) to generate a PDF report which contains a font awesome icon.

I have kept the fontawesome file in this path:

vendor/assets/fonts/fontawesome.css.erb

and corresponding fonts in this path:

vendor/assets/fonts/fontawesome/fa-brands-400.eot

A sample snippet from fontawesome.css.erb: (this is how fonts are referred)

/*!
 * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url('<%= asset_path 'fontawesome/fa-brands-400.eot' %>');
  src: url('<%= asset_path 'fontawesome/fa-brands-400.eot' %>?#iefix') format("embedded-opentype"), url('<%= asset_path 'fontawesome/fa-brands-400.woff2' %>') format("woff2"), url('<%= asset_path 'fontawesome/fa-brands-400.woff' %>') format("woff"), url('<%= asset_path 'fontawesome/fa-brands-400.ttf' %>') format("truetype"), url('<%= asset_path 'fontawesome/fa-brands-400.svg#fontawesome' %>') format("svg"); }

I am using asset pipeline.

I have included the fontawesome to the report layout (report.html.erb) as below:

<%= stylesheet_link_tag wicked_pdf_asset_base64('fontawesome.css') %>

When I load the PDF in debug mode, I get square boxes only and I do not see anything in PDF.enter image description here

I referred this question: Font Awesome not working, icons showing as squares

and added the CDN link to fontawesome in place of local file. It worked only in debug mode.

When I tried in PDF mode, it took a long period of loading time and finally it didn't show the font. Hence, this is not a solution for me.

Looking forward to your inputs. Thanks

Changes: I updated the fontawesome.css.erb with absolute reference to font file:

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url('<%= ActionController::Base.helpers.wicked_pdf_asset_path('fontawesome/fa-brands-400.woff') %>');
}

In debug mode, I am getting the following error in Chrome browser.

Not allowed to load local resource: file:///home/Projects/my_app/vendor/assets/fonts/fontawesome/fa-brands-400.woff

Solution

  • Wickedpdf opens html as a local file, so all urls should be either relative to some temporary folder, full local file paths (these are generated by wicked pdf helpers) or absolute urls with hosts.

    Your fontawesome.css contains urls to font files that does not contain host by default. You can either create a separate version of that for pdf generation, or include in html template head itself:

    <style>
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal; font-weight: normal;
  src: url('<%= wicked_pdf_asset_path 'fontawesome/fa-brands-400.woff' %>');
}
</style>

    (no need for iefix and can use less formats, because we are sure that wkhtmltopdf is not IE, also there was a bug with fallback urls for fonts not working)