Wicked PDF - showing fontawesome icons as sqaure box

Question

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.

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

score 2 · Accepted Answer · answered May 27 '19 at 14:55

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)

Thanks for the response. I did change the fontawesome file and now getting `Not allowed to load local resource` error. I have added the code to the question in **Changes** section above, please have a look. — dp7, May 28 '19 at 13:14
@dp7 for debug mode that error is normal, for quicker markup it's convenient to alter `asset_path`/`wicked_pdf_asset_path ` depending on rendering mode — Vasfed, May 28 '19 at 13:51

score 2 · Answer 2 · answered Mar 25 '20 at 18:57

The wicked_pdf_stylesheet_pack_tag and wicked_pdf_stylesheet_link_tag helpers don't seem to play nice with fontawesome due to the relative path reference to the webfonts.

The following worked for me (using webpacker)...

yarn add @fortawesome/fontawesome-free

In app/javascript/packs/reports.js (name the pack whatever you want):

import '@fortawesome/fontawesome-free/scss/fontawesome.scss'
import '@fortawesome/fontawesome-free/scss/solid.scss'
// add other icons as necessary

And then in your layout file:

= stylesheet_link_tag asset_pack_url('reports.css')

Using asset_pack_url instead of asset_pack_path is important because wicked_pdf needs the full url and won't work with a relative path.

Wicked PDF - showing fontawesome icons as sqaure box

2 Answers2