Use Custom Font in Header and Footer

[aymanalhattami]

To use custom font in the header or in the footer, you need to convert the font to base64 like code below

<style>
    @font-face {
        font-family: 'Noto Kufi Arabic';
        src: url('data:font/truetype;charset=utf-8;base64,{{ base64_encode(file_get_contents(public_path('fonts/NotoKufiArabic/NotoKufiArabic-Medium.ttf'))) }}') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    * {
        font-family: 'Noto Kufi Arabic', 'Arial', sans-serif !important;
    }
    body {
        font-family: 'Noto Kufi Arabic', 'Arial', sans-serif;
    }
</style>

Full Example

PdfInvoiceController.php

public function __invoke()
{
    return \Spatie\LaravelPdf\Facades\Pdf::view('pdf.transaction', ['transaction' => $record])
            ->withBrowsershot(function (Browsershot $browsershot) {
                   $browsershot->writeOptionsToFile();
            })
            ->headerView('pdf.header')
            ->footerView('pdf.footer')
            // ...
}

header.blade.php

<style>
    @font-face {
        font-family: 'Noto Kufi Arabic';
        src: url('data:font/truetype;charset=utf-8;base64,{{ base64_encode(file_get_contents(public_path('fonts/NotoKufiArabic/NotoKufiArabic-Medium.ttf'))) }}') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    * {
        font-family: 'Noto Kufi Arabic', 'Arial', sans-serif !important;
    }
    body {
        font-family: 'Noto Kufi Arabic', 'Arial', sans-serif;
    }
</style>

<header>
    {{ config('app.name') }}
</header>

footer.blade.php

<style>
    @font-face {
        font-family: 'Noto Kufi Arabic';
        src: url('data:font/truetype;charset=utf-8;base64,{{ base64_encode(file_get_contents(public_path('fonts/NotoKufiArabic/NotoKufiArabic-Medium.ttf'))) }}') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    * {
        font-family: 'Noto Kufi Arabic', 'Arial', sans-serif !important;
    }
    body {
        font-family: 'Noto Kufi Arabic', 'Arial', sans-serif;
    }
</style>

<footer >
    Page
    @pageNumber
    Of
    @totalPages
</footer>