PDF does not display custom font; only generic

[plweil]

Using Laravel 9, Inertia, Vue 3, and Vite. I am using Browsershot to generate and save a PDF from a blade view file, and cannot get the PDF use a Google font. I've tried using both @font-face and a local URL (used asset() and absolute URL) and downloading the font on the fly from googlapis. If I display only the html view in the borwser, the font is correct. But the saved PDF only has Helvetica. Right now I'm working locally, so there are no network issues. No errors. What do I have to do to get the custom font (in this case, Red Hat Display) into the PDF?

[plweil]

In the end, downloading from googleapis with a link in head ended up working.

[daugaard47]

I was going to recommend converting the font to base64. That's how I got it to work.
Place in the view:

<style>
    @font-face {
        font-family: 'redhat';
        src: url('data:application/font-ttf;charset=utf-8;base64,d09GMgAA...CRAZY_LONG_STRING....I1RYwAAA==') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .redhat{
        font-family: 'redhat', cursive;
    }

Glad you got it working. Question.. How did you get PDF to save correctly? I'm on windows 11, running locally and can save images, but errors on pdf's for some reason. Are you using puppeteer in your project or globally?

[plweil]

base64 was going to be my next move. I'm using puppeteer. Saving the pdf goes without a hitch -- at least locally. On the server, we're still dealing with some node permissions issues. Mysterious errors are such a pain. I thank my lucky stars that it works for me.

[daugaard47]

Are you on windows or mac? Seems like Mac has no issue. I'm having the same issue as these windows guys here.

I used this for some other image stuff and ran into that permission issue on the server too. I think I ended up creating a new user on the server and made sure that user had root privileges. It was a real headache. Honesty I used ChatGPT to help solve it. lol
But I then have to do this in my code for production and local:

                    if (config('app.env') === 'local') {
                        $image = Browsershot::url($url)
                            ->windowSize(1763, 1163)
                            ->timeout(120)
                            ->screenshot();
                        Log::info('Local image generated at: ' . date('Y-m-d H:i:s'));
                    } else {
                        $image = Browsershot::url($url)
                            ->setNodeModulePath('/usr/lib/node_modules/')
                            ->setChromePath('/usr/bin/google-chrome')
                            ->windowSize(1763, 1163)
                            ->timeout(60)
                            ->screenshot();
                        Log::info('Production image generated at: ' . date('Y-m-d H:i:s'));
                    }

[plweil]

I'm on a Mac. Initially I had an if/else along similar lines for the node path. I've since changed it to a environment variable (using Laravel):

    Browsershot::html($html)
      ->setNodeBinary(config('constants.node_bin') . 'node')
      ->setNpmBinary(config('constants.node_bin') . 'npm')
      [etc]

// .env
NODE_BIN=/Users/xxx/.nvm/versions/node/v16.20.2/bin/

The server is running Red Hat enterprise. A colleague is going to try and address the server permissions thing ...soon... .

[Yiddishe-Kop]

This is the only thing that solved it for me:

Browsershot::html($content)
   ->setOption('args', ['--disable-web-security']) // to disable CORS [to load fonts from other domain]
   ->waitUntilNetworkIdle()
   ->pdf()