Laravel DomPdf Add Custom Font

Question

I am trying to use OLD English font in Dompdf with Laravel., I have inserted the font in laravel view. But it seems when generating the pdf It is not working.I tried editing dompdf >vendor >.../dompdf_font_family_cache.dist.php File.But no luck,

Can anyone Suggest a Solution?

Thanks In Advance.

found a solution [here](http://stackoverflow.com/questions/24412203/dompdf-and-set-different-font-family) does this help! — Shailesh Ladumor, Apr 26 '17 at 14:07
You shouldn't edit that file directly. The most straightforward method is to use an `@font-face` declaration. You indicated in comments that you already tried this...you should update your question so we can see _what_ you tried. Does the running process have read/write access to the storage/fonts directory as is the default for laravel-dompdf ([ref](https://github.com/barryvdh/laravel-dompdf#configuration))? — BrianS, May 08 '17 at 20:48

score 33 · Answer 1 · answered Aug 26 '18 at 09:14

33

Make a fonts directory in the storage folder of your Laravel project. ( storage/fonts )
Put your .otf or .ttf files in the storage/fonts directory.

In your view/html add @font-face rules by using the storage_path method Laravel provides.

@font-face {
    font-family: 'Your custom font name';
    src: url({{ storage_path('fonts\your-custom-font.ttf') }}) format("truetype");
    font-weight: 400; // use the matching font-weight here ( 100, 200, 300, 400, etc).
    font-style: normal; // use the matching font-style here
}

Add font-family rules to your css as seen below

body {
    font-family: "Your custom font name";
}

Hope this helps.

answered Aug 26 '18 at 09:14

Melvin Tehubijuluw

555
7
16

1

For me, from some reason, it doesn't work. I checked and the font file exists. – guyaloni Sep 26 '19 at 18:35
Is it a .ttf file? – Melvin Tehubijuluw Sep 27 '19 at 11:30
Yes, it is a .ttf file. – guyaloni Sep 27 '19 at 12:07
Do you have a github repo I can check? – Melvin Tehubijuluw Sep 27 '19 at 13:01
No, but I opened a new issue with the entire info - https://stackoverflow.com/q/58132528/1039488 – guyaloni Sep 27 '19 at 20:04
It worked great for me. I'd just add: - put @font-face before any other CSS statement - php process must be able to write on storage/fonts – splig Nov 13 '20 at 12:03
This works, but I also had to define the `chroot` option for domPDF for it to work: `$options->set('chroot', storage_path());` – waffl Dec 08 '21 at 15:10
1

If you use GIT, you should also check in the storag/fonts folder (but not the files) e.g. add a .gitignore file with folowing content: `*` (newline) `!.gitignore` – Patrick Schmidt Dec 21 '21 at 13:01
Also make sure your custom `font-family` doesn't contain spaces or it might not work for some reason – NoOorZ24 Apr 14 '22 at 07:46

score 6 · Answer 2 · answered Jun 06 '17 at 10:38

I was trying to include custom fonts too. I included the font in the view (using @font-face declaration), but when I tried to generate the pdf, it gave me an ErrorException in AdobeFontMetrics.php. I resolved by creating a fonts folder in the storage folder of your laravel project. So now I have:

> storage
    > app
    > fonts
    > framework
    > logs

I hope it will help

jewelhuq · Answer 3 · 2020-12-22T18:25:37.770

2

@font-face {
font-family: 'Journal';
src: url('yourwebsite.com/journal.ttf")}}') format('truetype');
}
.typed {
font-family: 'Journal';
}
<p class='typed'>Signature</p>

Make sure to put your font name like this font: Journal; It will work.

Plus add fonts folder under your storage folder.

edited Dec 22 '20 at 18:25

answered Dec 19 '20 at 23:35

jewelhuq

1,210
15
19

score 2 · Answer 4 · edited May 03 '23 at 21:46

Place the font in the storage/fonts folder.

In my example OpenSans is in storage/fonts/

Open sans can also be downloaded from GoogleFonts.

then add the following style tag to your html.

<style>
          
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-Bold.ttf") }}) format("truetype");
                font-weight: 700;
                font-style: normal;
            }
    
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-BoldItalic.ttf") }}) format("truetype");
                font-weight: 700;
                font-style: italic;
            }
    
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-ExtraBold.ttf") }}) format("truetype");
                font-weight: 800;
                font-style: normal;
            }
    
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-ExtraBoldItalic.ttf") }}) format("truetype");
                font-weight: 800;
                font-style: italic;
            }
    
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-Light.ttf") }}) format("truetype");
                font-weight: 300;
                font-style: normal;
            }
    
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-LightItalic.ttf") }}) format("truetype");
                font-weight: 300;
                font-style: italic;
            }
    
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-Medium.ttf") }}) format("truetype");
                font-weight: 500;
                font-style: normal;
            }
    
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-MediumItalic.ttf") }}) format("truetype");
                font-weight: 500;
                font-style: italic;
            }
    
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-Regular.ttf") }}) format("truetype");
                font-weight: 400;
                font-style: normal;
            }
    
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-SemiBold.ttf") }}) format("truetype");
                font-weight: 600;
                font-style: normal;
            }
    
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-SemiBoldItalic.ttf") }}) format("truetype");
                font-weight: 600;
                font-style: italic;
            }
    
            @font-face {
                font-family: 'Open Sans';
                src: url({{ storage_path("fonts/static/OpenSans/OpenSans-Italic.ttf") }}) format("truetype");
                font-weight: 400;
                font-style: italic;
            }
    
            body {
                font-family: 'Open Sans', sans-serif;
            }
</style>

score 1 · Answer 5 · answered Apr 26 '17 at 14:11

1

Set font into html page which is load in Dompdf
    <html>
    <head>
      <style>
      @font-face {
        font-family: 'Helvetica';
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        src: url("font url");
      }
      body {
        font-family: Helvetica, sans-serif;
      }
      </style>
    </head>
    <body>
      <p>hello world</p>
    </body>
    </html>

answered Apr 26 '17 at 14:11

Shailesh Ladumor

7,052
5
42
55

Is anyone found an answer ! – maxasela Apr 28 '17 at 01:51
Not Working.Thanks – maxasela Apr 30 '17 at 19:13
1

oic you have a solution ... for everyone's benefit you should add an answer indicating how you resolved your issue. – BrianS May 08 '17 at 20:49
Thank You @BrianS No,I do not have a solution.Although I have found a alternative solution(Not related to Laravel). I have created a printed layout which default heading and tables of the bill which printed to the paper, And used css styling and spaces in dompdf to keep things things in order,rather than printing all once. :D – maxasela May 09 '17 at 05:28
anyone found the solution? – Mau España Nov 10 '21 at 01:46

score 0 · Answer 6 · answered May 03 '23 at 12:16

I face the same problem but I resolved that by a single-line code. If you got to the definition of Dompdf if provide to setOption method to use.

The code needs to update in your controller

 $pdf = PDF::loadView('promo-template.pdf', compact('data'))
            ->setOption('fontDir', public_path('/fonts'));

It will generate an installed-fonts.json file in font dir.

In your style.css include your font face it will automatically get the custom font and will make a JSON file for that.

Laravel DomPdf Add Custom Font

6 Answers6

Linked