1

I am using Wicked pdf to generate pdf in rails 4 application. I need to render urdu fonts in pdf. Following these two answers by Nikhil and Ashitaka, I downloaded Jameel Noori Nastaleeq font from here, installed them on my local and added them in assets/fonts folder. After precompiling assets, defined font-family in my pdf.scss

@font-face {
  font-family:"Jameel Noori Nastaleeq";
  src:url("Jameel Noori Nastaleeq/Jameel Noori Nastaleeq.ttf");
  font-weight: bold;
}
.urdu-font {
  font-family: 'Jameel Noori Nastaleeq';
}

My pdf view file looks like this

%head
  %meta{:charset => "utf-8"}   
    = wicked_pdf_stylesheet_link_tag 'pdf'
%body.urdu-font
  = render "custom_form"

where _custom_form.pdf.haml partial contains input field containing urdu text.

Urdu font works fine on local in both pdf and debug mode but when deployed, it don't render correctly in pdf file whereas it renders fine in debug mode.

In debug mode I checked the path of font asset i.e src:url(file:////home/deploy/<remote-location>/releases/20180622133137/public/assets/Jameel Noori Nastaleeq/Jameel Noori Nastaleeq-39c54f1646a6a4f68408f3a26400e457cb1e52226c284d8c4ab36a3363520e0f.ttf) which appears to be fine and font actually renders fine in this html debug mode.

P.S. I have also seen this post which is using remote fonts provided by googleapi. I have tried this and it works but I want to use local font resource.

M. Habib
  • 623
  • 1
  • 9
  • 15
  • why are you adding `font-weight: bold;` in your `@font-face` declaration? Where is your `@font-face` rule for the regular weight? – Mike 'Pomax' Kamermans Jun 27 '18 at 02:07
  • As I referenced to this [`Ashitaka's answer`](https://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline) . I just want my font to be bold by default, So I did not find any reason to remove that. – M. Habib Jun 27 '18 at 05:37
  • @Mike'Pomax'Kamermans after you pointed out `@font-face` declaration. I searched and found that it will only declare fonts for bold characters only. However, after removing that, problem is still there. Fonts do not render on pdf, but renders fine on html. – M. Habib Jun 27 '18 at 06:03
  • I'm a little confused about that `file:///` link because that should absolutely not work in the browser (your browser for *very good security reasons* is not to look outside the directory the file you're loading is in). – Mike 'Pomax' Kamermans Jun 27 '18 at 15:30
  • that file link is within project directory and fonts file is placed where other assets like javascript and css files are placed after precompilation. So nothing to worry there. There is no problem in reading that file by the browser. – M. Habib Jun 27 '18 at 16:26
  • But there **should** be a problem loading that file by the browser. Your browser should have refused to load that font using the `file:///` protocol, citing CORS violations. The fact that it apparently works is the thing that's surprising, and should be surprising to you too: it suggests you're using a nonstandard browser, or a browser with a custom configuration that bypasses the normal security model. Neither Firefox, nor Chrome, nor Edge, will let you load a webfont from `file:///` (even if the page is also on `file:///`) unless you intentionally mess with the settings to bypass security – Mike 'Pomax' Kamermans Jun 27 '18 at 19:13

1 Answers1

1

WickedPDF makes most assets available as file:// references because your content gets rendered to a tempfile before being rendered with wkhtmltopdf, however this does pose some issues for ajax calls and fonts.

You can bypass issues loading from file by base64 encoding the font asset and inlining it with:

url('<%= wicked_pdf_asset_base64('yourfile.ttf') %>')
Unixmonkey
  • 18,485
  • 7
  • 55
  • 78