I have a PDF view that extends a layout:
@extends('components.layouts.pdf')
The layout file:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="application-name" content="{{ config('app.name') }}" />
<meta name="csrf-token" content="{{ csrf_token() }}" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{ config('app.name') }}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
@filamentStyles
@vite('resources/css/app.css')
<style>
body {
font-family: 'Lato', sans-serif;
}
</style>
</head>
<body class="antialiased">
{{ $slot ?? '' }}
@yield('content')
</body>
</html>
When I view the PDF rendered view in the browser, the css renders correctly, but on the PDF itself, it's not using all the css. Some of it is there, it's not totally unstyled, but it's not picking up some styles.
What am I doing wrong? Is there anything I have to do to render the css within the PDF file?
I'm using browsershot, BTW to generate the PDF.