I am using Browsershot, which is based on Puppeteer to create PDF from HTML. The HTML-source is rendered Laravel-Blade.
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?
