The fallback fonts dont work in dompdf when rendering a pdf in laravel

[MaharshM]

I have a blade file which im rendering on a pdf, everything works out great and all, the headers, footers and all the other stuff but the only problem is the content we're rendering is dynamic and our client has customers in multiple countries so we're never really sure what the language of the content exactly is going to be. I have added the css for this like this

STYLE

 <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic&family=Noto+Sans&family=Noto+Sans+SC&display=swap');
    @import url('https://api.fontshare.com/v2/css?f[]=satoshi@500,300,400&display=swap');

        body{
            font-family:  'Satoshi' ,'Noto Sans SC',  'Nato Naskh Arabic',  serif;
        }
</style>

Backend code to generate pdf

use Barryvdh\DomPDF\Facade\Pdf;

$pdf = Pdf::loadView('GenerateCompanyPdf', $data)->save(public_path('something.pdf'));
return $pdf->download('something.pdf');

This renders the pdf in the expected 'Satoshi' font, as expected but the characters that are not in Satoshi are rendered as empty boxes. Ive tried with omitting the Satoshi font and replacing it with Noto Sans SC (Simplified Chinese) and then the chinese characters are displayed as intended. But our entire website is in Satoshi font and we cant change that for just a pdf. Is there something I'm doing wrong or missing? Id appreciate any help or clue i can get, Thanks.

[bsweeney]

This was previously reported in #3142 and built out in #3155.

Current releases of Dompdf (up to 2.0.3) do not support this functionality. The functionality will be included in the forthcoming 2.1.0 release and is available in the master branch or the nightly download.

[MaharshM]

Thanks for the reply @bsweeney . I'll try the master branch. Cheers

[mohamedhekal]

It seems like you're trying to use the "Satoshi" font for your PDF content, but when characters from other languages that are not supported by the "Satoshi" font are encountered, they appear as empty boxes. This issue occurs because the "Satoshi" font doesn't have glyphs for those characters.

To handle multi-language content in your PDF without changing the entire font, you can consider using a font stack that includes multiple fonts, each supporting different language scripts. This way, if a character is not available in one font, the browser will try the next font in the stack until it finds a suitable one. Here's an example of how you can modify your CSS to include multiple fonts:

<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic&family=Noto+Sans&family=Noto+Sans+SC&display=swap');
    @import url('https://api.fontshare.com/v2/css?f[]=satoshi@500,300,400&display=swap');

    body {
        font-family: 'Satoshi', 'Noto Sans SC', 'Noto Naskh Arabic', serif;
    }
</style>

In this example, we've specified a font stack in the font-family property. The browser will attempt to use the "Satoshi" font first, and if a character is not available in "Satoshi," it will fall back to "Noto Sans SC" for Simplified Chinese characters and "Noto Naskh Arabic" for Arabic characters.

This way, you can ensure that your PDF content displays characters from different languages correctly while still using the "Satoshi" font for most of the text.

[MaharshM]

Bro thats the exact css I'm already using.