Local fonts not loaded correctly? #450

ahoiroman · 2020-12-03T15:17:01Z

ahoiroman
Dec 3, 2020

Hello there,

I got a an issue:

This is my blade-template that is being rendered:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,initial-scale=1.0" name="viewport">
    <!-- Styles -->
    <link href="{{ asset(mix('/css/app.css')) }}" rel="stylesheet">
<body>
<div class="relative h-screen">
    @include('pdf.partials.header')
    <div class="absolute inset-x-0 bottom-0">
        @include('pdf.partials.footer')
    </div>
</div>
</body>
</html>

app.css contains @font-faces like:

 /* lato-100 - latin */
    @font-face {
        font-family: 'Lato';
        font-style: normal;
        font-weight: 100;
        src: local('Lato Hairline'), local('Lato-Hairline'),
        url('../fonts/lato-v16-latin-100.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v16-latin-100.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v16-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v16-latin-100.svg#Lato') format('svg'); /* Legacy iOS */
        font-display: swap;
    }
    /* lato-100italic - latin */
    @font-face {
        font-family: 'Lato';
        font-style: italic;
        font-weight: 100;
        src: local('Lato Hairline Italic'), local('Lato-HairlineItalic'),
        url('../fonts/lato-v16-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/lato-v16-latin-100italic.woff') format('woff'), /* Modern Browsers */ url('../fonts/lato-v16-latin-100italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/lato-v16-latin-100italic.svg#Lato') format('svg'); /* Legacy iOS */
        font-display: swap;
    }

Now if I try to create a pdf, those fonts are not loaded correctly.

If I trace that down using:

$view      = view('pdf', compact('data'));
$body_html = $view->render();

$requests = \Spatie\Browsershot\Browsershot::html($body_html)->format('A4')
    ->margins(8, 22, 8, 22)->showBackground()->addChromiumArguments([
        'font-render-hinting' => 'none',
    ])->waitUntilNetworkIdle()->ignoreHttpsErrors()
    ->triggeredRequests();

dump($requests);

I see those requests:

4 => array:1 [
"url" => "http://example.test/fonts/lato-v16-latin-300.woff2?98d8cf792834c0bef59c2be99dc3533d"
]

I am able to open this path using my browser and the virtual machine Laravel lives in, is able to do so, too:

root@example:~# http://example.test/fonts/ibm-plex-mono-v5-latin-200.woff2?4b65d6136cfc2097c4a2103960f00a2c
Resolving example.test (example.test)... 127.0.0.1, 127.0.1.1
Connecting to example.test (example.test)|127.0.0.1|:80... connected.
HTTP request sent, awaiting response... 200 OK

But the fonts are still not applied.

Now if I simply use Google fonts like this

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,initial-scale=1.0" name="viewport">
    <!-- Styles -->
    <link href="{{ asset(mix('/css/app.css')) }}" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet"></head>

<body>
<div class="relative h-screen">
    @include('pdf.partials.header')
    <div class="absolute inset-x-0 bottom-0">
        @include('pdf.partials.footer')
    </div>
</div>
</body>
</html>

it works just fine.

So what did I do wrong?

InforPsico · 2021-09-25T21:16:18Z

InforPsico
Sep 25, 2021

I have the same problem

0 replies

thibodelanghe · 2022-02-07T13:38:46Z

thibodelanghe
Feb 7, 2022

Does anyone has found a solution for this?

0 replies

rGaillard · 2022-03-03T15:59:56Z

rGaillard
Mar 3, 2022

@thibodelanghe @Retropartidas @ahoiroman
Had the same problem here it was a CORS issue because it tries to load the font from a null origin

[0303/165037.561929:INFO:CONSOLE(0)] "Access to font at 'http://xxxxx.test/fonts/xxxxx/xxxxx.otf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.", source: file:///var/tmp/1868976758-0716909001646322575/index.html (0)

Maybe this type of issue should be documented somewhere here.

0 replies

alexpgates · 2022-05-13T21:10:52Z

alexpgates
May 13, 2022

We has success using this tool to get the base64 version of the font right in the CSS.

1 reply

noge075 Aug 9, 2022

Basically you can disable CORS with the following:
https://spatie.be/docs/browsershot/v2/miscellaneous-options/fixing-cors-options

kokoshneta · 2022-11-19T21:24:33Z

kokoshneta
Nov 19, 2022

Bumping this back to the top…

Any progress anywhere on this issue? My use case is more or less the same as in the question, except for two things:

I’m not using a Google Font
I use root-relative paths in my @font-face declarations, e.g., src: url('/webfonts/font-file.woff') format('woff2');

When I trace the requests, I get local paths, not HTTP requests:

2 => array:1 [
    "url" => "file:///webfonts/font-file.woff"
]

I can’t really tell for sure if the file request actually succeeds, but replacing ->triggeredRequests() with ->failedRequests() gives an empty array (both with and without ->ignoreHttpsErrors()), so presumably it does.

Yet no fonts embedded in the PDF.

1 reply

cSenkoWeb Mar 15, 2023

I just had the same issue, and thanks to your debugging, i have the following solution:
Use absolute file paths in @font-face!

First my tailwind css mix files didn't load, so i embeded it using style tag and this trick to simply use my main css file:
https://codingwithstef.com/2021-02-11-how-to-embed-essential-styles-with-a-custom-blade-directive
But my fonts didn't load, so i added an other script tag after the first one, which overwrites the font-face definitions, like that:

    @embedstyles('css/app.css')
    <style type="text/css">
        @font-face {
            font-family: 'myfont';
            src: url('{{ base_path('public/fonts/myfont.woff2') }}') format('woff2'),
                 url('{{ base_path('public/fonts/myfont.woff') }}') format('woff');
            font-weight: normal;
            font-style: normal;
        }
    </style>

Now, i have to figure out, how to add some kind of nice font to the header and footer of the PDF.... probably i have to generate an image with nice fonts on the fly and embed it with simple css.

Joel-Jensen · 2023-07-07T07:46:32Z

Joel-Jensen
Jul 7, 2023

I have had great success with including css and font with the public_path() method.

An example of how I use a layout for both normal render ($isPreview) and for the PDF:

@if($isPreview)
    <link href="{{ mix('css/app.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/fontawesome.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('css/light.min.css') }}" rel="stylesheet" />
@else
    <link href="{{ public_path('css/app.css') }}" rel="stylesheet" />
    <link href="{{ public_path('css/fontawesome.min.css') }}" rel="stylesheet" />
    <link href="{{ public_path('css/light.min.css') }}" rel="stylesheet" />

    <style>
        @font-face {
            font-family: "Optima LT Pro";
            src: url("{{ public_path('/webfonts/OptimaLTPro-Roman.woff2') }}") format("woff2"),
                url("{{ public_path('/webfonts/OptimaLTPro-Roman.woff') }}") format("woff");
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }
        
        @font-face {
            font-family: "Optima LT Pro";
            src: url("{{ public_path('/webfonts/OptimaLTPro-Italic.woff2') }}") format("woff2"),
                url("{{ public_path('/webfonts/OptimaLTPro-Italic.woff') }}") format("woff");
            font-weight: normal;
            font-style: italic;
            font-display: swap;
        }
    </style>
@endif

Notice how I use it for both the .css and for the url to the .woff.

0 replies

nbyloff · 2023-07-07T15:52:51Z

nbyloff
Jul 7, 2023

@Joel-Jensen What does this do to your file size? I am having issues with fonts loading, and when I base64 encode them to include in my CSS, my PDF jumps from 3MB to 45MB.

1 reply

Joel-Jensen Oct 19, 2023

Not really affected, have single page PDF with fonts with a size of < 50 kb

bilogic · 2023-12-16T00:45:21Z

bilogic
Dec 16, 2023

I have a line in my blade that reads <div style="font-family: 'Times New Roman' !important;"> but font rendered is PDF. Any idea which logs to check on what is going on?

0 replies

Yiddishe-Kop · 2024-03-28T11:38:38Z

Yiddishe-Kop
Mar 28, 2024

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()

1 reply

ralphjsmit Apr 20, 2024

Worked great, thanks!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Local fonts not loaded correctly? #450

{{title}}

Replies: 9 comments 4 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Local fonts not loaded correctly? #450

Replies: 9 comments · 4 replies

Replies: 9 comments 4 replies