Laravel DomPdf Add Custom Font [duplicate]

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.

Manometer

found a solution here does this help! – Biak

@ShaileshLadumor. No it doent help – Manometer

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)? – Spagyric

Answer 1

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

3. 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
   }
   

4. Add font-family rules to your css as seen below

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

Hope this helps.

Chukker

For me, from some reason, it doesn't work. I checked and the font file exists. – Hunnish

Is it a .ttf file? – Chukker

Yes, it is a .ttf file. – Hunnish

Do you have a github repo I can check? – Chukker

No, but I opened a new issue with the entire info - stackoverflow.com/q/58132528/1039488 – Hunnish

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 – Dicarlo

This works, but I also had to define the chroot option for domPDF for it to work: $options->set('chroot', storage_path()); – Byelection

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 – Wouldst

Also make sure your custom font-family doesn't contain spaces or it might not work for some reason – Roose

Answer 2

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

Fatness

Answer 3

@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.

Egeria

Answer 4

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>

Interleaf

Answer 5

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>

Biak

Is anyone found an answer ! – Manometer

Not Working.Thanks – Manometer

oic you have a solution ... for everyone's benefit you should add an answer indicating how you resolved your issue. – Spagyric

Thank You @Spagyric 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 – Manometer

anyone found the solution? – Clean

Answer 6

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.

Disclosure