DEV Community

Rafa Rafael
Rafa Rafael

Posted on

23

Adding Custom Fonts to Laravel-Dompdf

When generating PDFs in Laravel using dompdf, custom fonts sometimes do not render correctly. This can be resolved by configuring dompdf to recognize and use these fonts. In this guide, we’ll walk through the steps to add a custom font to Laravel-dompdf.

Step 1: Download the Custom Font

First, download the custom font you want to use. For this example, we’ll use the Poppins font.

  1. Visit Google Fonts.
  2. Search for “Poppins”.
  3. Download the font by clicking on the download icon.

Step 2: Add the Font to Your Laravel Project

  1. Create a fonts directory in your public folder:
mkdir public/fonts
Enter fullscreen mode Exit fullscreen mode
  1. Extract the downloaded font files and move them to the public/fonts directory.

Step 3: Register the Font in Dompdf Configuration

Laravel-dompdf needs to know about the custom font. This can be achieved by setting font directories and font cache in the dompdf configuration.

  1. Open the config/dompdf.php file. If the file doesn’t exist, publish the configuration file using:
php artisan vendor:publish --provider="Barryvdh\DomPDF\ServiceProvider"
Enter fullscreen mode Exit fullscreen mode
  1. Update the font_dir and font_cache to point to the public/fonts directory. Your config/dompdf.php should look like this:
return [
    // Other configurations...

    'font_dir' => public_path('fonts/'),
    'font_cache' => public_path('fonts/'),

    // More configurations...
];
Enter fullscreen mode Exit fullscreen mode

- OR -

Generate the PDF with Custom Font

Use it in the PDF generation logic to set the custom font as the default font.

In your controller or wherever you’re generating the PDF, add the custom font options:

use Barryvdh\DomPDF\Facade\Pdf;

class PdfController extends Controller
{
    public function generatePdf()
    {
        $data = [
            'param1' => 'value1',
            // other data
        ];

        $pdf = Pdf::loadView('pdf-view', $data)
            ->setOption([
                'fontDir' => public_path('/fonts'),
                'fontCache' => public_path('/fonts'),
                'defaultFont' => 'Poppins'
            ]);

        return $pdf->download('document.pdf');
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Load the Font in Your View

Next, we need to inform dompdf about the custom font in the view file where the PDF is being generated.

  1. Open the view file where the PDF content is being generated, e.g., resources/views/pdf-view.blade.php.
  2. Add the following CSS to load the custom font:
<style>
    @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 400;
        src: url('{{ public_path('fonts/Poppins-Regular.ttf') }}') format('truetype');
    }

    body {
        font-family: 'Poppins', sans-serif;
    }
</style>
Enter fullscreen mode Exit fullscreen mode

By following these steps, you can ensure that your custom fonts are correctly rendered when generating PDFs using Laravel-dompdf. This solution involves downloading the font, placing it in the correct directory, registering it in dompdf, and setting it as the default font in the PDF generation logic.

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (4)

Collapse
 
anna_maeminorca_8e28e8df profile image
Anna Mae Minorca

mine's not working with montserrat, how could I fix this?

Image description

Image description

Image description

Collapse
 
edmodj profile image
Edson Cortés

Thanks, I'm getting this error "Path cannot be empty". On any linux environment it works but on Windows IIS the same configuration does't work.

Even we verify with File::exist

Image description

Image description

I appreciate any idea :D

Collapse
 
rafaelogic profile image
Rafa Rafael

Thanks for reaching out! This might be a path resolution issue. Have you tried entering the absolute path? e.g. /public/fonts/Poppins-Regular.ttf. Check also the IIS user if it has read permission for the fonts directory.

Collapse
 
johndivam profile image
JohnDivam

Thanks

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay