Custom font in shopware 6 document (pdf) not rendering

Question

We created a custom document (generated pdf) for our shopware 6 project according to this documentation:

https://developer.shopware.com/docs/guides/plugins/plugins/checkout/document/add-custom-document.html#add-custom-document

This works perfectly fine but we have one styling issue.

We are using two custom fonts, one is from Google Font and the other is from CDNFont.

The Google Font is loaded perfectly fine but the one from CDN font is not rendered in the pdf at all.

We load the fonts like this:

{% block document_font_links %}
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap" rel="stylesheet">
   <link href="https://fonts.cdnfonts.com/css/gilligans-island" rel="stylesheet">
{% endblock %}

And in the css file:

style_custom_portrait.css.twig

font-family: 'IBM Plex Sans', Arial, sans-serif;
font-family: 'Gilligans Island', Arial, sans-serif;

Only the IBM Plex Sans is working.

We already tried to

• store the font directly in the plugin and load it from there
• Load the font inline base 64:

@font-face { font-family: gilligans island; font-weight: 400; src: local('Gilligans Island'), url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAFkIAA8AAAAAjIQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAABYVAAAAD0AAABOhBhy82NtYXAAAFEQAAAB2QAAAzK0ij+MY3Z0IAAAAugAAAA6AAAAOl...}

But none of this lead to any solution.

Is there anything we need to do differently when loading fonts from another CDN than Google Fonts. Or do you have any solution for our problem?

Thanks a lot for any help!

Answer 1

Documents progress through the following states:

1. Twig Template
2. Generated HTML Code
3. PDF file

Twig

First, you need to check for the validity of the Twig template, which in your case seems to be valid. Otherwise, check for errors inside your logs.

HTML

You can check for the HTML inside the respective Renderer class, i.e. InvoiceRenderer. Use a debugging tool like XDebug to check the value of $html after the function $this->documentTemplateRenderer->render got executed, or simply copy and paste echo $html;die(); after the function, then use the preview function in the Administration order document view of your local development system.

I have tested this with your code. The font 'Gilligans Island' gets displayed if you display this HTML in the browser.

Which brings us to the final state of the document, the

PDF

Where the Font suddenly is not rendered. This is because the PDF generation in Shopware 6 is based on dompdf. dompdf struggles with fonts and external resources sometimes, so it's recommended to use local TTF, truetype fonts. TTF does not get delivered via your second link, only woff.

To summarize:

You need to supply fonts in formats that are compatible with dompdf, preferably ttf:

<style>
    @font-face {
        font-family: 'Gilligans Island';
        font-style: normal;
        font-weight: 400;
        /* replace the url with the url to the ttf file */
        src: local('Gilligans Island'), url('https://yourshop.com/bundles/yourtheme/assets/font/gilligan.ttf') format('truetype');
    }
</style>

and the CSS

font-family: 'Gilligans Island', Arial, sans-serif;