Wicked_pdf: Wicked PDF doesnt render text

[sarsena]

I have an app I am creating that creates a packing slip. When I go to my/pathto/invoice.pdf It generates the images and background colors and the format but none of the text is actually shown. I dont know if I'm missing something. Its probably some step I overlooked but any help or suggestions would be greatly appreciated. Thanks!

[sarsena]

I have figured out the problem and it had to do with me referencing in my applications.css the follow:

@font-face {
font-family: 'Museo-Sans';
src: url('fonts/MuseoSans_100.otf');
font-weight: 100;
}
@font-face {
font-family: 'Museo-Sans';
src: url('fonts/MuseoSans_300.otf');
font-weight: 300;
}
@font-face {
font-family: 'Museo-Sans';
src: url('fonts/MuseoSans_500.otf');
font-weight: normal;
}
@font-face {
font-family: 'Museo-Sans';
src: url('fonts/MuseoSans_700.otf');
font-weight: 700;
}
@font-face {
font-family: 'Museo-Sans';
src: url('fonts/MuseoSans_900.otf');
font-weight: bold;
}

So my new problem is how can I add the custom fonts to be generated in the pdf and print out the way it shows in the browser?

Thanks!

[kennuzzo]

i had the same problem,
by embedding the fonts in base64 it will render the fonts correctly:

/* embed ttf */
@font-face{
font-family: "Awesome font";
src: url(data:application/x-font-tff;base64, <base64_font_data> );
}

[sarsena]

Alright I will try this. Thanks!

[sabcio]

I've noticed that it doesn't work with opentype, but it did with truetype.

This is hacky, is there any other solution using wicked_pdf and wkhtmltopdf-binary?

[unixmonkey]

You should be able to replace relative url's with fully qualified ones like so:

src: url(http://yourdomain.com/fonts/MuseoSans_900.otf);

or

src: url(<%= Rails.root.join('app','assets','fonts','MuseoSans_900.otf') %>);

If by "hacky", you mean gross by having to base64 encode the fonts and paste them in your stylesheets, then yes. I would suggest you throw this in a helper file:

def asset_data_base64(path)
  asset = Rails.application.assets.find_asset(path)
  throw "Could not find asset '#{path}'" if asset.nil?
  base64 = Base64.encode64(asset.to_s).gsub(/\s+/, "")
  "data:#{asset.content_type};base64,#{Rack::Utils.escape(base64)}"
end

Then you could do this:

`src: url(<%= asset_data_base64('fonts/MuseoSans_900.otf') %>);

[sabcio]

I tried using asset_url, it did work in debug mode (HTML looked just fine) but produced empty PDF file.

src: url(<%= asset_url('orbitron.otf') %>)

Using absolute path to file in fs, didn't work at all...

Thanks for the helper method, will try it out.

Update

Well that helper doesn't detect proper content type for otf or ttf files, producing empty PDFs. Even when fixed PDF doesn't have proper fonts.

I will stick to my working version of manually converting to base64 and embedding in css files.

[thisisole]

Are there any new, cool solutions? Tried everything but cant get wicked_pdf to work with my fonts. Tried also base64...

Or is there somewhere an example how to do this exactly? (including css files etc.)

[unixmonkey]

@thisisole Did you try converting your font to .otf? I know there are some formats that wkhtmltopdf can't work with.

The example I posted above, I actually tried before posting.

[thisisole]

thanks, having an ttf... will try to convert it to otf and come back then.

another question: i have to implement the font with: wicked_pdf_stylesheet_link_tag, correct?

[unixmonkey]

@thisisole No, but I would recommend it. You can use regular stylesheet_link_tag if you like, but the wicked_pdf_ one inlines the CSS, so it's one less thing that wkhtmltopdf needs to go out and download, but there are cases where you'd want to use the regular ones (like precompiling with the asset pipeline).

[thisisole]

YAY!!! its working with the asset_data_base64 function... man... what a fight... costs me 3 days... thx for help.

[dja]

I can't get it working with .otf or .ttf, and I've tried converting to base64 as well... Any other solutions?

Font displays perfectly in html (debug=true), but not in render PDF...

[unixmonkey]

@danieljacobarcher Can you post the relevant bits from your code (and the font if legal to do so)?
If it isn't you can email me: dave @unixmonkey dot net and I'll delete after getting it working.

[dja]

@unixmonkey Totally. I'm just using Google Web Fonts Roboto.

@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Regular.ttf') %>");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Medium.ttf') %>");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Bold.ttf') %>");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Black.ttf') %>");
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Light.ttf') %>");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Thin.ttf') %>");
    font-weight: 100;
    font-style: normal;
}

[unixmonkey]

I was able to get this working locally and pushed it up to https://github.com/unixmonkey/wicked_pdf_issues

in this commit: https://github.com/unixmonkey/wicked_pdf_issues/commit/386aba4e6007c776abb8136f590cb63ecc571e87

You can see it online at https://wicked-pdf-issues.herokuapp.com/pages/issue_250

I added a second font "Poiret One" because at first I was having trouble telling Roboto from the normal body font, but then I realized that Roboto's TTF just wasn't working for me in PDF, so I ran a few of them through https://everythingfonts.com/ttf-to-otf, and they were working. I guess some fonts just work differently from others?

Let me know how it goes.

[dja]

@unixmonkey Thanks for checking it out and sharing some example code. I finally figured it out - that it needs the assets precompiled for wkhtmltopdf to pick them up. Somehow I missed that in the documentation..

[henry-p]

For anyone having trouble with sprockets > 3.0, here is an improved version of the asset_data_base64 helper.

def asset_data_base64(path)
    asset = (Rails.application.assets || ::Sprockets::Railtie.build_environment(Rails.application)).find_asset(path)
    throw "Could not find asset '#{path}'" if asset.nil?
    base64 = Base64.encode64(asset.to_s).gsub(/\s+/, "")
    "data:#{asset.content_type};base64,#{Rack::Utils.escape(base64)}"
 end

[katebeavis]

I tried everything, spent a day trying to figure it out, encoding in base64 etc. Turns out simply converting from ttf to otf got it to work for me! Hope this helps somebody....

[unixmonkey]

@henry-p Can you open a new PR or issue describing what trouble you are having, and your revised code?

[aivils]

Nowadays we have helper asset_data_uri() and in the scss asset-data-url()
After updrade to rails5 fonts in PDF disappears. Both methods above helps to restore PDF.

[deeparajen]

@unixmonkey Totally. I'm just using Google Web Fonts Roboto.

@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Regular.ttf') %>");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Medium.ttf') %>");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Bold.ttf') %>");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Black.ttf') %>");
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Light.ttf') %>");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: "Roboto";
    src:url("<%= ApplicationHelper.asset_data_base64('Roboto/Roboto-Thin.ttf') %>");
    font-weight: 100;
    font-style: normal;
}

I had implemented on the same way but oops not working. Wicked_pdf doesn't support roboto font-family

layouts/pdf.html.erb







<%= wicked_pdf_stylesheet_link_tag "application" %>
<%= wicked_pdf_stylesheet_link_tag "pdf" %>

    <div class="content-wrapper">
        <div class="box-container">
            <div class="container-fluid">
                <%= yield %>
            </div>
        </div>
    </div>
</body>

pdf.css.scss
@font-face {
font-family: "Roboto Regular";
src:url("<%= ApplicationHelper.asset_data_base64('roboto/Roboto-Regular.ttf') %>");
font-weight: 300px;
font-style: normal;
}
@font-face {
font-family: "Roboto";
src:url("<%= ApplicationHelper.asset_data_base64('roboto/Roboto-Bold.ttf') %>");
font-weight: 700;
font-style: normal;
}

controller
def report_generation
respond_to do |format|
format.html

  format.pdf do
    render :pdf => "report_generation",
          :template => 'dashboard/report_generation.html.erb',
          :layout => 'layouts/pdf.html.erb',
          :save_to_file => Rails.root.join('pdfs', 'report_generation.pdf'),
          :disposition => "attachment"
  end
end

end

Can anyone help me to fix this issue.