This question has been flagged
2 Replies
10832 Views
fontsbase64wkhtml2pdfwkhtmltopdf
Avatar
Maxime MARAIS

Hi,

After googling several hours, I still cannot have custom fonts displayed in PDF generated by Odoo. Help much appreciated, please! Here is the complete story.

I created a custom report inheriting account.report_invoice_document. This is needed as invoices are customized to display extra information (like a Harmonized System Codes summary, for example). I was also asked to use a custom font to customize the layout of our invoices.

In this template, I added an inline style sheet and applied a font-face to the whole document:

 <style>

    @font-face {
        font-family: 'My Font';
        font-weight: normal;
        font-style: normal;
        src: url(data:font/opentype;charset=utf-8;base64,d09GRg<!--[ LONG BASE64 STRING ]-->DN6ag4) format('woff'),
             url(data:font/truetype;charset=utf-8;base64,AAEAAA<!--[ LONG BASE64 STRING ]-->moOA==) format('truetype');
    }


    html, body
    {
        font-size: 8;
        font-family: 'My Font';
    }

</style>

Tuning the Invoices report to produce HTML, I'm able to get the expected results on screen in my browser. Pressing the Print button export the same report as a PDF file through wkhtmltopdf I get my invoice with the correct data, but not the right font.

Things I tested, without success:

  • use only WOFF

  • use only TTF

  • use both WOFF and TTF

  • direct PDF generation without primarily HTML display on screen

  • add a .mytest class in style an apply it to specific html tags 

Still the same: OK on screen, not as expected as PDF file.

For experimentation, also tried to include Material Icon as follow:

<style>
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('data:font/truetype;charset=utf-8;base64,AAEA<!--[ LONG BASE64 STRING ]-->ABc=') format('truetype');
}
 
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
</style>

and later adding this somewhere in the template.

<span>TEST <i class="material-icons">&#xE87C;</i></span>

Same as above: works well on screen and displays "TEST" + a smiling face icon, works partially on PDF and only displays TEST without the face icon.

I'm stuck there. Could someone help?

Thanks.

-- 

Maxime.

Avatar
Discard
Avatar
Fran Dávila
Best Answer

Hi! 

I have a similar problem . In my case I have Odoo installed on my server and no fonts are rendered.  I use wkhtml2pdf and every Image on the invoices, quotes, et. display fine, but no fonts are ever. displayed.

Which are the folders (path) in which you add the css files separately? And also, is the code you are writing used into the qweb views of the template? If not... where do you add the code?


Thanks

Avatar
Discard
Avatar
Maxime MARAIS
Author Best Answer

Finally, I made it work. Googling a little more I read wkhtml2pdf may not respect the CSS instructions order but the order external files, including CSS files are delivered. 

In my case it appears the inline CSS immediately available (as it's delivered within the HTML file) is overload by a default CSS file defined by Odoo and delivered with a little delay, time for the web server to delivery it.

Solution was :

  • to move my CSS, keeping the base64-encoded font, into a CSS file to be served by the web server

  • to add this code to my template.

        <template id="assets_common" inherit_id="report.assets_common">
            <xpath expr="." position="inside">
                <link href="/enies_invoice/static//src/css/style.css" rel="stylesheet" type="text/css"/>
            </xpath>
        </template>

Hope this can help.

Avatar
Discard