DomPDF Font Setup

User

$html = view('client.pdf-report')->render();

$pdf = Pdf::loadHTML($html)->setPaper('a4', 'landscape')
->setBasePath(public_path());

return $pdf->stream('document.pdf');

Quandox

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@page { padding:0px; margin: 0;}
.section { overflow: hidden;height: 100%; page-break-after: always; padding: 0px 50px; background: url('{{ public_path('client/pdf/img/body_bg.jpg') }}') no-repeat; background-size: cover; background-position: top left;}
.main-logo { text-align: center; height: 100%; display:flex; align-items:center; position:relative;}
.main-logo img { width: 750px; margin-top:350px}

.index-list {background: rgba(64, 75, 71, 0.6);  padding: 50px; max-width: 1000px; border-radius:0px 0px 25px 25px; margin: 10px auto;  display:flex; }
.index-list .index-txt { background: #CDF765; display:inline-block; border-radius: 10px; font-size: 20px; color: #152924; font-weight: 600; font-family: "Manrope", sans-serif;  padding: 8px 25px;}	
.list-items .items { display: flex; border-bottom: #fff solid 2px; padding: 20px 0; width:100% margin-bottom: 20px; }
.list-items .items .index-title,
.list-items .items .index-content,
.list-items .items .index-number { color: #fff; font-size: 34px; width:30%;}
.list-items .items .index-content {color: #a9b8af;font-size: 18px;}
.list-items tr{border-bottom: #fff solid 2px;}
.list-items tr td{border-bottom: #fff solid 2px;  padding:20px 0px}
.index-title{ color: #fff; font-size: 34px;}
.index-content{ color: #a9b8af; font-size: 18px;}
.index-number{ color: #a9b8af; font-size: 18px;   text-align: right;}

.greenbox { background:#CDF765; padding:100px 50px 30px 50px; border-radius: 0 0 25px 25px ; min-height: 300px; width:auto; margin:10px 0 0 0; position: relative; z-index: 9;}
.greenbox .leftsec{font-size:54px; width:36%; float:left; font-weight:500; font-family: "Inter", sans-serif;}
.greenbox .rightsec{font-size:20px; width:64%; float:right; line-height:30px;   color: #858585;;}
.twocolumn-box{ width:100%; float:left; margin:100px 0}
.twocolumn-box .col-1{ width:61%; float:left; }
.twocolumn-box .col-1 + .col-1{ float:right; width:35%}
.twocolumn-box .content_box{   background: rgba(64, 75, 71, 0.6);  padding: 50px 50px; border-radius:25px; width:auto; float:left}
.twocolumn-box .content_box span.index-txt{background: #CDF765; display: inline-block; border-radius: 10px; font-size: 18px; color: #152924; font-weight: 600; font-family: "Manrope", sans-serif; padding: 5px 20px;}
.twocolumn-box .content_box h3{ color:#fff; position:relative; margin-bottom:0px; padding:0px; }
.twocolumn-box .content_box hr{ background:#fff; width:60px; float:left; margin-top:10px; margin-bottom:20px; height:1px}
.twocolumn-box .content_box p { width: 100%; line-height: 28px; color: #a9b8af;  font-size: 24px;}
.overview_section {width: 100%; float: left;}
.overview_section .left_overview { width: 30%; float: left;}
.overview_section .right_overview { width: 62%; float: right;}
.overview_section .left_overview .overview_heading { background: #CDF765; padding: 50px 0px 10px 30px; border-radius: 0px 0px 25px 25px; width: auto; margin: 10px 0 0 0; position: relative; z-index: 9;  margin-bottom: 40px;}
.overview_section .left_overview .overviewList {background: #fff; border-radius: 0px 25px 25px 0px; padding: 30px; display:flex;}
.overview_section .left_overview .overview_heading h1 { font-size: 55px;}
.overview_section .left_overview .overviewList .list { background: #e0fde9; border-radius: 10px; padding: 15px; display:flex; margin-bottom: 10px;}
.overview_section .left_overview .overviewList .list .txt1 { background: #152924; border-radius: 7px; padding: 7px 0; float:left; width: 48px; color: #65f78f; text-align: center;  font-weight: bold;}
.overview_section .left_overview .overviewList .list .txt2 { width: 70%; font-size: 17px; color: #707f83; float:left;}
.overview_section .left_overview .overviewList .list .txt2 strong { display: block; font-size: 24px; margin-bottom: 8px; color: #152924; font-weight: normal;}
.salebox {background:#CDF765; padding:40px 50px 40px 50px;  border-radius: 0 0 25px 25px ;   width:auto; margin:10px 0 0 0;  position: relative;  z-index: 9;  font-size:45px; text-align:center;}
.txt1 {background: #152924; border-radius: 7px; padding: 7px 0; height:20px; width: 33px; color: #65f78f; text-align: center; font-weight: bold; }
.txt2 strong { display: block; font-size: 24px; margin-bottom: 8px; color: #152924; font-weight: normal;}
.txt2 {font-size: 17px; color: #707f83;}
.recommend_box { background: #fff; border-radius: 25px; padding: 30px;}
.recommend_box figure {text-align: center; margin: 0px 0 5px 0;}
.recommend_box span.title { display: block; text-align: center; font-size: 30px; font-weight: 600; margin-bottom: 15px;}
.recommend_box span.info { font-size: 20px; font-weight: normal; display: block; text-align: center; color: #ccc;  min-height: 80px;}
.list { padding: 10px; display: flex; gap: 10px 10px; background: #e9f2eb; margin-bottom: 10px; border-radius: 29px; font-size: 16px; align-items: center; color: #22806d; font-weight: 500;}
.report-sec { width: 100%;margin-top: 30px;}
.report-sec .col-1 {padding: 0 0px;width: 320px}
.premium_box { background: rgba(64, 75, 71, 0.6); border-radius: 25px;  padding: 30px;}
.premium_box span.most-txt { background: #fff; padding: 10px 25px; border-radius: 10px; margin-bottom: 20px; display: inline-block;}
.premium_box h3 { color: #CDF765; font-weight: 500; margin: 10px 0 10px 0; padding: 0px;}
.premium_box p { font-size: 20px; color: #fff; line-height: 30px; margin: 5px 0 30px 0px;}
.premium_box1.premium_box p { margin-top: 20px;}
.premium_box a {background: #CDF765; padding:12px 0px;  color: #152924; border-radius: 8px; display: block; text-align: center; text-decoration: none; font-weight: 500; font-size: 20px; }
.premium_box ul { margin-top: 30px; min-height: 175px; }
.premium_box ul li { margin-bottom: 10px; color: #fff;}
.premium_box1.premium_box ul { min-height: 165px; }
.reportSec {background: rgba(64, 75, 71, 0.6); border-radius: 25px; padding: 60px 10px 60px 70px; margin-top: 40px; margin-bottom: 50px; float: left; width: 93.5%;}
.reportSec .report-box-main { width: 50%;  float: left;}
.saleboxs {background: #CDF765; padding: 60px 50px 60px 50px; border-radius: 0 0 25px 25px; width: auto; margin: 10px 0 0 0; position: relative; z-index: 9; display:flex; font-size: 45px;}
.saleboxs .leftsec { width: 100%;}
.saleboxs .rightsec {width: 100%; font-size: 20px; line-height: 28px;}
.reportbtn a {background: #000; padding:12px 0px; color: #fff; border-radius: 8px; display: block; text-align: center; text-decoration: none; font-weight: 500; font-size: 20px;}
/**Contact Us**/
.contact_box {background: rgba(64, 75, 71, 0.6);border-radius: 25px; padding: 50px 40px 20px 40px; margin-top: 40px; margin-bottom: 50px; max-width: 650px;}
.contact_box span {background: #CDF765; display: inline-block; margin-bottom: 15px; border-radius: 10px; font-size: 20px; color: #152924; font-weight: 600; font-family: "Manrope", sans-serif;padding: 5px 25px;}
.contact_box h4 {color: #fff; margin-bottom: 20px;}
.contact_box p { width: 80%;line-height: 22px;color: #a9b8af;font-size: 19px;}
.contact_box ul {margin:0px 0 30px 0; padding:0px;margin-bottom: 30px;}
.contact_box ul li {margin-bottom: 10px;color: #fff;list-style: none;}
.contact_box ul li img {margin-right: 20px;position: relative; top: 10px; }
.contact-report .img { position: absolute; top: 160px; width: 853px; right: -300px; z-index: 10;}
/**last screen**/
.reportgraph_box {background: #fff; padding: 10px 10px; border-radius: 20px;}
.shorttxt { min-height: 200px; margin-top: 10px; color: #ccc;}
.reportgraph_box .title {font-weight: 600; color: #152924; font-size: 20px; border-bottom: #ccc solid 1px; padding-bottom: 15px; margin-top: 10px; margin-bottom: 15px;}
.reportgraph_box .title img{ position:relative; top:5px; margin-right:8px}
.knowledgelist { padding: 10px; background: #e9f2eb; margin-bottom: 13px; border-radius: 29px; font-size: 14px; align-items: center; color: #22806d; font-weight: 500;}
.knowledgelist img{ position:relative; top:5px; margin-right:8px}
/**SaleIQ**/
.salegraph_sec{ background: rgba(64, 75, 71, 0.6);  padding: 50px 0px 20px 0; border-radius:25px; width:100%; float:left; margin-top:50px} 
.salegraph_sec .graph-sec {border-bottom: #fff solid 2px; width: 91%;margin-left: 50px; }
.salegraph_sec .graph-sec .graph_first { width: 45px; float: left; padding-left:0px; height: 550px;}
.salegraph_sec .graph-sec .graph-column:last-child{  margin-right:0px}
.salegraph_sec .graph-sec .graph_first span{width: 26px; float: left; height:2px; margin-left:0px; margin-bottom:100px;background:#fff}
.salegraph_sec .graph-sec .graph-column.height-4 { margin-top: 100px; height: 390px; }
.salegraph_sec .graph-sec .graph-column.height-5 { height: 490px; }
.salegraph_sec .graph-sec .graph-column.height-2 { margin-top: 300px; height: 190px; }
.salegraph_sec .graph-sec .graph-column.height-3 { margin-top: 200px; height: 290px; }
.salegraph_sec .graph-sec .graph-column { width: 138px; padding: 15px; border-radius: 20px; background: #fff; margin: 0 10px; }
.graph_box { background: #e0fde9; border-radius: 10px; padding: 10px; width: 90%; margin-bottom: 10px;}
.graph_box .title { background: #152924; border-radius: 10px; padding: 10px; width: 85%; margin-bottom: 10px; color: #fff; font-size: 15px; align-items: center; gap: 10px 9px; }
.graph_box .title  img{ position:relative; top:5px; margin-right:5px}
.graph_box .Score { background: #fff; font-size: 15px; border-radius: 10px; padding: 10px; width: 85%; color: #152924;}
.breakBtn {background: #CDF765;width: 90%;padding: 10px;text-align: center; border-radius: 7px; font-size: 16px; margin-right: 10px; margin-left: 5px; }
.lavelBtn {background: #152924; padding: 10px 0px; color: #fff; text-align: center; border-radius: 7px; font-size: 16px; display: flex;align-items: center; gap: 10px;}
.lavelBtn img{ position:relative; top:5px; right:5px}
.questionTable th{ padding:0 0px 0 41px; color:#fff; font-weight:normal; border-bottom:#a9b8af solid 1px; padding-bottom:10px;}
.questionTable td{ padding:30px 20px; color:#fff; font-weight:normal; border-right:#a9b8af solid 1px; padding-bottom:10px;}
.questionTable td:nth-child(1){ border:none !important}
.recommend_list .list img{ position:relative; top:5px; margin-right:5px}
.premium_box ul li img {
    margin-right: 20px;
    position: relative;
    top: 10px;
}
.reportbtn a img {
    position: relative;
    margin-left: 10px;
    width: 13px;
}
.premium_box a img {
    position: relative;
    margin-left: 10px;
    width: 13px;
}

.list-items.reportgra tr td{ border-bottom:none !important}
</style>

Index

Page Title
Lorem ipsum dolor sit amet, consectetuer
01

General Info
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla

Info
General Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum

Info
General Info

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam,

Overview

A
Knowledge Short description.

B
Skills Short description.

C
Process Short description.

D
Technology Short description.

E
Performance Short description.

SalesIQx

Knowledge
Pillar Score 4/5

Knowledge
Pillar Score 3/5

Knowledge
Pillar Score 5/5

Knowledge
Pillar Score 2/5

Knowledge
Pillar Score 4/5

Responder Breakdown

C-level: 2 of 2

Management: 5 of 6

Employees: 3 of 8

Get the full SalesIQx report

Recommendations
Short description.

Recommendations
Recommendations
Recommendations
Recommendations

Get full report

Most Popular
Premium
Full assessments with customized coaching.
Get started

Key
Benefit
Key
Benefit
Key
Benefit

Enterprise
Comprehensive, ongoing support with strategy sessions, in-depth reporting, and process
refinement.
Get started

Key
Benefit
Key
Benefit
Key
Benefit

Contact Us

Meet Uwe Goethert
Uwe Goethert, founder of Quandox, brings global management
expertise from over 40 countries
His cross-industry experience in developing innovative,
data-driven solutions has enabled him with the insights to turn
underperforming sales teams into market leaders.M
Uwe's unconventional approach integrates AI and sales
development strategies to drive real business growth.
Uwe s Contact Details

Contact
Details
Contact
Details
Contact
Details

Knowledge Pillar

These questions assess how well the sales team
understands the product, market, and customer needs.

Questions
0
1
2
3
4
5

1 Questions?

Questions
0
1
2
3
4
5

1 Questions?

Skills Pillar

These questions measure the sales team’s interpersonal and technical selling
abilities

Questions
0
1
2
3
4
5

1 Questions?

Questions
0
1
2
3
4
5

1 Questions?

Process Pillar

These questions evaluate the efficiency and effectiveness of the sales process
itself.

Questions
0
1
2
3
4
5

1 Questions?

Questions
0
1
2
3
4
5

1 Questions?

Technology Pillar

These questions assess how well the sales team uses technology, including CRM
systems, analytics, and automation, to support the sales process.

Questions
0
1
2
3
4
5

1 Questions?

Questions
0
1
2
3
4
5

1 Questions?

Performance Pillar

These questions measure the team’s effectiveness in achieving sales goals and
closing deals.

Questions
0
1
2
3
4
5

1 Questions?

Questions
0
1
2
3
4
5

1 Questions?

SalesIQx report

Knowledge
Short description.

Recommendations
Recommendations
Recommendations
Recommendations

Skills
Short description.

Recommendations
Recommendations
Recommendations
Recommendations

Process
Short description.

Recommendations
Recommendations
Recommendations
Recommendations

Technology
Short description.

Recommendations
Recommendations
Recommendations
Recommendations

Technology
Short description.

Recommendations
Recommendations
Recommendations
Recommendations

font Manrope and others google font not applied in dom PDF

Assistant

Google Fonts (like Manrope, Inter, Roboto, etc.) **do not work automatically** with DomPDF because:

1. DomPDF does not support loading external resources via `https://` links (like Google Fonts).
2. It does **not interpret “ or `@import` CSS with remote URLs**.
3. Fonts need to be **locally available and embedded** properly.

—

### ✅ Solution: Use Local Fonts with DomPDF

#### 1. **Download the required Google Fonts**
You need to download the `.ttf` files for the fonts you're using.

For example:
– Download **Manrope**, **Inter**, and **Roboto** from [Google Fonts](https://fonts.google.com/)
– Extract and place the `.ttf` files in `public/fonts/` (or anywhere local and accessible).

Folder structure:

public/fonts/Manrope-Regular.ttf
public/fonts/Inter-Regular.ttf
public/fonts/Roboto-Regular.ttf
...

—

#### 2. **Register Fonts in DomPDF config**
Open or create the DomPDF config file (usually in `config/dompdf.php` in Laravel) and add:

'font_dir' => base_path('public/fonts'), // Ensure fonts are in a public path
'font_cache' => storage_path('fonts'),

'default_font' => 'manrope', // Optional, you can still override in CSS

'fonts' => [
    'manrope' => [
        'R' => 'Manrope-Regular.ttf',
        'B' => 'Manrope-Bold.ttf',
    ],
    'inter' => [
        'R' => 'Inter-Regular.ttf',
        'B' => 'Inter-Bold.ttf',
    ],
    'roboto' => [
        'R' => 'Roboto-Regular.ttf',
        'B' => 'Roboto-Bold.ttf',
    ],
],

—

#### 3. **Use Local Fonts in CSS**
In your `default.css` or inline “, define the font-face:

@font-face {
  font-family: 'Manrope';
  src: url('{{ public_path('fonts/Manrope-Regular.ttf') }}') format('truetype');
  font-weight: normal;
}
@font-face {
  font-family: 'Manrope';
  src: url('{{ public_path('fonts/Manrope-Bold.ttf') }}') format('truetype');
  font-weight: bold;
}

body {
  font-family: 'Manrope', sans-serif;
}

**Important:** Blade variables like `{{ public_path(…) }}` won’t work in CSS files, so either:
– Move these `@font-face` blocks into the `view` Blade file itself inside a “ tag.
– Or use pure CSS with relative paths if your fonts are public:

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-Regular.ttf');
}

—

### Summary

To fix fonts not loading in DomPDF:
– ✅ Download the font `.ttf` files
– ✅ Register them in `config/dompdf.php`
– ✅ Reference them using `@font-face` in inline CSS
– ❌ Don't use Google Fonts “ or `@import`

Would you like me to prepare a downloadable font pack and the ready CSS block for Manrope + Inter?

User

i'm using this
BarryvdhDomPDFFacadePdf
is this Register them in config/dompdf.php neccessary

Assistant

Yes — **if you're using `BarryvdhDomPDFFacadePdf`**, then:

✅ **Yes, registering fonts in `config/dompdf.php` is necessary** if you want to use **custom fonts like Manrope, Inter, Roboto**, etc., because:

– DomPDF (under the hood) **only recognizes fonts listed in `config/dompdf.php` under `'fonts'`**.
– Even if you declare a `@font-face` in CSS, DomPDF will **not embed it unless it's registered**.

—

### ✔ What You Must Do

1. **Put the `.ttf` font files** in a folder, usually:

public/fonts/

2. **In `config/dompdf.php`, register the fonts:**

'font_dir' => public_path('fonts'), // or resource_path('fonts')
   'font_cache' => storage_path('fonts'),

   'default_font' => 'manrope', // optional

   'fonts' => [
       'manrope' => [
           'R' => 'Manrope-Regular.ttf',
           'B' => 'Manrope-Bold.ttf',
       ],
       'inter' => [
           'R' => 'Inter-Regular.ttf',
           'B' => 'Inter-Bold.ttf',
       ],
       'roboto' => [
           'R' => 'Roboto-Regular.ttf',
           'B' => 'Roboto-Bold.ttf',
       ],
   ],

3. **In your inline “ (inside the Blade view):**

<style>
   @font-face {
       font-family: 'Manrope';
       src: url('{{ public_path('fonts/Manrope-Regular.ttf') }}') format('truetype');
       font-weight: normal;
   }

   body {
       font-family: 'Manrope', sans-serif;
   }
   </style>

—

### 🔁 After That

Clear the config cache (if cached):

php artisan config:clear
php artisan cache:clear

—

Would you like a working zip of all `.ttf` font files (Manrope, Inter, Roboto) to save time?

User

but we dont have dompdf.php fil

Assistant

If you don’t have a `config/dompdf.php` file, that means the DomPDF configuration hasn't been published yet.
Since you're using `BarryvdhDomPDF`, you can easily generate this config file.

—

### ✅ Step-by-Step: Publish `dompdf.php` Config

Run this command in your Laravel project root:

php artisan vendor:publish --provider="BarryvdhDomPDFServiceProvider"

This will generate:

config/dompdf.php

Once created, **you can register your custom fonts inside** like this:

'font_dir' => public_path('fonts'), // or resource_path('fonts') if you keep them there
'font_cache' => storage_path('fonts'),

'fonts' => [
    'manrope' => [
        'R' => 'Manrope-Regular.ttf',
        'B' => 'Manrope-Bold.ttf',
    ],
    'inter' => [
        'R' => 'Inter-Regular.ttf',
        'B' => 'Inter-Bold.ttf',
    ],
],

—

### After Publishing
Make sure:
1. Your `.ttf` files are placed in `public/fonts/` (or whichever directory you reference).
2. You reference them correctly in CSS like:

<style>
   @font-face {
       font-family: 'Manrope';
       src: url('{{ public_path('fonts/Manrope-Regular.ttf') }}');
   }
   body {
       font-family: 'Manrope';
   }
   </style>

—

Would you like help downloading and organizing the font files into your project folder structure?

User

okay now we have

<script>
...
</script>

tags.
*
* ==== IMPORTANT ==== Enabling this for documents you do not trust (e.g. arbitrary remote html pages)
* is a security risk.
* Embedded scripts are run with the same level of system access available to dompdf.
* Set this option to false (recommended) if you wish to process untrusted documents.
* This setting may increase the risk of system exploit.
* Do not change this settings without understanding the consequences.
* Additional documentation is available on the dompdf wiki at:
* https://github.com/dompdf/dompdf/wiki
*
* @var bool
*/
'enable_php' => false,

/**
* Rnable inline JavaScript
*
* If this setting is set to true then DOMPDF will automatically insert JavaScript code contained
* within

<script>
...
</script>

tags as written into the PDF.
* NOTE: This is PDF-based JavaScript to be executed by the PDF viewer,
* not browser-based JavaScript executed by Dompdf.
*
* @var bool
*/
'enable_javascript' => true,

/**
* Enable remote file access
*
* If this setting is set to true, DOMPDF will access remote sites for
* images and CSS files as required.
*
* ==== IMPORTANT ====
* This can be a security risk, in particular in combination with isPhpEnabled and
* allowing remote html code to be passed to $dompdf = new DOMPDF(); $dompdf->load_html(…);
* This allows anonymous users to download legally doubtful internet content which on
* tracing back appears to being downloaded by your server, or allows malicious php code
* in remote html pages to be executed by your server with your account privileges.
*
* This setting may increase the risk of system exploit. Do not change
* this settings without understanding the consequences. Additional
* documentation is available on the dompdf wiki at:
* https://github.com/dompdf/dompdf/wiki
*
* @var bool
*/
'enable_remote' => false,

/**
* List of allowed remote hosts
*
* Each value of the array must be a valid hostname.
*
* This will be used to filter which resources can be loaded in combination with
* isRemoteEnabled. If enable_remote is FALSE, then this will have no effect.
*
* Leave to NULL to allow any remote host.
*
* @var array|null
*/
'allowed_remote_hosts' => null,

/**
* A ratio applied to the fonts height to be more like browsers' line height
*/
'font_height_ratio' => 1.1,

/**
* Use the HTML5 Lib parser
*
* @deprecated This feature is now always on in dompdf 2.x
*
* @var bool
*/
'enable_html5_parser' => true,
],

];

Assistant

Great — now that your `config/dompdf.php` file exists and you've confirmed its contents, you’re ready to register **custom fonts** like `Manrope` or `Inter`.

Here's what you should **do next** to make your custom fonts work with `BarryvdhDomPDF`:

—

### ✅ 1. Add Your Font Files

Put your `.ttf` files (e.g., `Manrope-Regular.ttf`, `Manrope-Bold.ttf`) inside:

/storage/fonts/

Make sure this folder exists and is **writable**:

mkdir -p storage/fonts
chmod -R 775 storage/fonts

—

### ✅ 2. Register Fonts in `config/dompdf.php`

Inside `'options' => [ … ]`, add this:

'font_dir' => storage_path('fonts'), // Already set

'fonts' => [
    'manrope' => [
        'R' => 'Manrope-Regular.ttf',
        'B' => 'Manrope-Bold.ttf',
    ],
    'inter' => [
        'R' => 'Inter-Regular.ttf',
        'B' => 'Inter-Bold.ttf',
    ],
],

This goes **outside** the `'options'` array, like this:

return [
    'show_warnings' => false,
    'public_path' => null,
    'convert_entities' => true,

    'fonts' => [  // <-- Place here
        'manrope' => [
            'R' => 'Manrope-Regular.ttf',
            'B' => 'Manrope-Bold.ttf',
        ],
        'inter' => [
            'R' => 'Inter-Regular.ttf',
            'B' => 'Inter-Bold.ttf',
        ],
    ],

    'options' => [
        ...

—

### ✅ 3. Use in Your Blade/CSS for PDF

<style>
@font-face {
    font-family: 'Manrope';
    src: url('{{ storage_path('fonts/Manrope-Regular.ttf') }}') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'Manrope';
    src: url('{{ storage_path('fonts/Manrope-Bold.ttf') }}') format('truetype');
    font-weight: bold;
}

body {
    font-family: 'Manrope', sans-serif;
}
</style>

—

### ✅ 4. Clear Config Cache (Important)

Run this to ensure changes are picked up:

php artisan config:clear

—

Let me know if you want me to generate a sample PDF blade view using your font setup.

User

font still not applying

Assistant

If the custom font like `Manrope` still isn't applying in your DomPDF-generated PDF, here's a **step-by-step checklist** to ensure it works correctly:

—

### ✅ 1. **Make sure `font_dir` and `font_cache` are correct**
In `config/dompdf.php`:

'font_dir' => storage_path('fonts'),
'font_cache' => storage_path('fonts'),

Ensure both directories exist and are writable:

mkdir -p storage/fonts
chmod -R 775 storage/fonts

—

### ✅ 2. **Font files are present**
Put your font files in `storage/fonts/`:

– `Manrope-Regular.ttf`
– `Manrope-Bold.ttf`

Double-check the file names — they must **match exactly**.

—

### ✅ 3. **Register fonts properly**
Outside the `'options'` key in `config/dompdf.php`, add:

'fonts' => [
    'manrope' => [
        'R' => 'Manrope-Regular.ttf',
        'B' => 'Manrope-Bold.ttf',
    ],
],

—

### ✅ 4. **Use the font name in HTML**
In your Blade view (or raw HTML used for PDF):

<style>
    body {
        font-family: 'manrope', sans-serif;
    }
</style>

<p>This is a test using Manrope font.</p>

🔁 **Use the key `'manrope'` (lowercase)** — this must match the key in the `fonts` array.

—

### ✅ 5. **Don't use `@font-face` with `storage_path()`**
Dompdf **does not support `@font-face` with Laravel’s `storage_path()` or `asset()` helpers** — because it treats HTML as plain input.

Instead, **just use the font name directly**, e.g.:

<p style="font-family: 'manrope';">Hello PDF!</p>

—

### ✅ 6. **Clear font cache**
You must regenerate DomPDF's internal font cache when you add fonts.

Run this once:

php artisan dompdf:clear
php artisan dompdf:install

If that doesn’t work, manually generate font cache:

php vendor/dompdf/dompdf/load_font.php storage/fonts/Manrope-Regular.ttf

But Barryvdh's version usually handles this when registered correctly.

—

### ✅ 7. **Force PDF to use that font**
Set it explicitly in your controller:

$pdf = Pdf::loadView('pdf.invoice', $data);
$pdf->setPaper('a4', 'portrait');
return $pdf->stream('invoice.pdf');

Make sure `pdf.invoice` uses `'manrope'` in HTML.

—

If it still doesn’t work, let me know:
– The full path and name of your `.ttf` files.
– A sample of your Blade view HTML.
– Any error message in logs or blank output.

Want me to validate a sample font + view snippet?

User

<script>
...
</script>

tags.
*
* ==== IMPORTANT ==== Enabling this for documents you do not trust (e.g. arbitrary remote html pages)
* is a security risk.
* Embedded scripts are run with the same level of system access available to dompdf.
* Set this option to false (recommended) if you wish to process untrusted documents.
* This setting may increase the risk of system exploit.
* Do not change this settings without understanding the consequences.
* Additional documentation is available on the dompdf wiki at:
* https://github.com/dompdf/dompdf/wiki
*
* @var bool
*/
'enable_php' => false,

/**
* Rnable inline JavaScript
*
* If this setting is set to true then DOMPDF will automatically insert JavaScript code contained
* within

<script>
...
</script>

tags as written into the PDF.
* NOTE: This is PDF-based JavaScript to be executed by the PDF viewer,
* not browser-based JavaScript executed by Dompdf.
*
* @var bool
*/
'enable_javascript' => true,

/**
* Enable remote file access
*
* If this setting is set to true, DOMPDF will access remote sites for
* images and CSS files as required.
*
* ==== IMPORTANT ====
* This can be a security risk, in particular in combination with isPhpEnabled and
* allowing remote html code to be passed to $dompdf = new DOMPDF(); $dompdf->load_html(…);
* This allows anonymous users to download legally doubtful internet content which on
* tracing back appears to being downloaded by your server, or allows malicious php code
* in remote html pages to be executed by your server with your account privileges.
*
* This setting may increase the risk of system exploit. Do not change
* this settings without understanding the consequences. Additional
* documentation is available on the dompdf wiki at:
* https://github.com/dompdf/dompdf/wiki
*
* @var bool
*/
'enable_remote' => false,

/**
* List of allowed remote hosts
*
* Each value of the array must be a valid hostname.
*
* This will be used to filter which resources can be loaded in combination with
* isRemoteEnabled. If enable_remote is FALSE, then this will have no effect.
*
* Leave to NULL to allow any remote host.
*
* @var array|null
*/
'allowed_remote_hosts' => null,

/**
* A ratio applied to the fonts height to be more like browsers' line height
*/
'font_height_ratio' => 1.1,

/**
* Use the HTML5 Lib parser
*
* @deprecated This feature is now always on in dompdf 2.x
*
* @var bool
*/
'enable_html5_parser' => true,
],

];
still not work

Assistant

Thanks for sharing the full `dompdf.php`. Your configuration is **close but contains a critical issue**: the `fonts` array is incorrectly placed **inside `options`**, which **Dompdf will not recognize**. It must be **outside** the `options` array.

—

### ✅ Fix the placement like this:

Move `'fonts' => […]` **outside** the `'options' => […]` block:

return [

    'show_warnings' => false,
    'public_path' => null,
    'convert_entities' => true,

    // ✅ CORRECT: Place fonts here
    'fonts' => [
        'manrope' => [
            'normal' => 'Manrope-Regular.ttf',
            'bold' => 'Manrope-Bold.ttf',
            'italic' => 'Manrope-Italic.ttf',
            'bold_italic' => 'Manrope-BoldItalic.ttf',
        ],
        'inter' => [
            'normal' => 'Inter-Regular.ttf',
            'bold' => 'Inter-SemiBold.ttf',
        ],
    ],

    'options' => [
        'font_dir' => storage_path('fonts'),
        'font_cache' => storage_path('fonts'),
        // ... rest of your options
    ],
];

—

### ✅ Additional steps (just once):

1. **Verify fonts exist**:
All files like `Manrope-Regular.ttf`, `Manrope-Bold.ttf`, etc. must be in `storage/fonts`.

2. **Clear and regenerate font cache**:

php artisan dompdf:clear
   php artisan dompdf:install

3. **In your Blade or HTML view**:

<style>
       body {
           font-family: 'manrope', sans-serif;
       }
   </style>

4. **Controller usage**:

use BarryvdhDomPDFFacadePdf;

   return Pdf::loadView('pdf.invoice', $data)->stream('invoice.pdf');

—

After correcting the config and clearing the cache, your font should apply. Would you like me to test a minimal Blade view snippet for Manrope as a sanity check?

User

still not applying font

Assistant

If your custom font (like Manrope or Inter) **still isn’t applying**, even after correcting the config, then go through this **definitive checklist** to resolve it:

—

### ✅ 1. Correct `dompdf.php` Structure (Summary)
Make sure:
– `fonts` is **outside** the `'options'` key.
– `font_dir` and `font_cache` paths are writable.
– Font files exist in `storage/fonts`.

✅ Example structure:

return [
    'show_warnings' => false,
    'public_path' => null,
    'convert_entities' => true,

    'fonts' => [
        'manrope' => [
            'normal' => 'Manrope-Regular.ttf',
            'bold' => 'Manrope-Bold.ttf',
        ],
    ],

    'options' => [
        'font_dir' => storage_path('fonts'),
        'font_cache' => storage_path('fonts'),
        'default_font' => 'manrope', // Ensure this is set
        // other options...
    ],
];

—

### ✅ 2. Confirm Font Usage in Blade

In your Blade view (`resources/views/pdf/test.blade.php`):

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: 'manrope', sans-serif;
        }
    </style>
</head>
<body>
    <h1>This should use Manrope font</h1>
    <p>Hello, custom font test.</p>
</body>
</html>

—

### ✅ 3. Regenerate Font Cache

Run this to clear and recompile font metrics:

php artisan dompdf:clear
php artisan dompdf:install

If that doesn’t work, try using `load_font.php` manually:

php vendor/dompdf/dompdf/lib/fonts/load_font.php storage/fonts/Manrope-Regular.ttf storage/fonts/Manrope-Bold.ttf storage/fonts/Manrope-Italic.ttf storage/fonts/Manrope-BoldItalic.ttf manrope

—

### ✅ 4. Permissions

Make sure font dir is writable:

chmod -R 775 storage/fonts

—

### ✅ 5. Render PDF

Use the correct code in your controller:

use BarryvdhDomPDFFacadePdf;

return Pdf::loadView('pdf.test')->stream('test.pdf');

—

### ✅ 6. Debug Output (Optional)

Enable warning to check issues:

'show_warnings' => true,

—

### 🔍 If it still doesn’t work

Please check:
– Is the font being used in DOMPDF’s log output? (`storage/logs/laravel.log`)
– Test switching to `default_font => 'Courier'` to confirm config file is being read.

—

Would you like me to prepare a minimal working test setup zip for you with fonts and Blade for verification?

User

when I set 'default_font' => 'manrope', this then its working fine

Assistant

Perfect — that confirms the issue was with the **font not being explicitly set as the `default_font`** in the DomPDF config.

To summarize for future reference:

—

### ✅ To Use Custom Font in DomPDF:
1. Place your `.ttf` files in `storage/fonts`.
2. In `config/dompdf.php`, set:

'fonts' => [
       'manrope' => [
           'normal' => 'Manrope-Regular.ttf',
           'bold' => 'Manrope-Bold.ttf',
       ],
   ],

3. And **crucially**:

'options' => [
       'default_font' => 'manrope',
       'font_dir' => storage_path('fonts'),
       'font_cache' => storage_path('fonts'),
       // ...
   ],

4. (Optional) Use `font-family: manrope;` in your Blade/CSS to override inline if needed.

—

Let me know if you'd like to enable switching fonts dynamically in PDF views as well.

User

but what about if we have different font

Assistant

Great question. If you want to use **multiple fonts** (e.g., `manrope`, `inter`, `roboto`, etc.) in the **same PDF** dynamically, you **do not need to set `default_font`** to one specific font. Instead, follow these steps:

—

### ✅ How to Use Multiple Fonts in DomPDF:

#### 1. **Ensure all fonts are registered** in `config/dompdf.php`:

'fonts' => [
    'manrope' => [
        'normal' => 'Manrope-Regular.ttf',
        'bold' => 'Manrope-Bold.ttf',
    ],
    'inter' => [
        'normal' => 'Inter-Regular.ttf',
        'bold' => 'Inter-SemiBold.ttf',
    ],
    'roboto' => [
        'normal' => 'Roboto-Regular.ttf',
        'bold' => 'Roboto-Bold.ttf',
    ],
],

#### 2. **Use inline CSS or stylesheets to apply specific fonts**:

<style>
  .manrope-text {
    font-family: 'manrope';
  }
  .inter-text {
    font-family: 'inter';
  }
</style>

<div class="manrope-text">This text uses Manrope</div>
<div class="inter-text">This text uses Inter</div>

> ✔ DomPDF will now recognize and apply each registered font based on `font-family` in your HTML/CSS.

#### 3. **If using Blade**, you can inline styles like this:

<p style="font-family: 'inter'; font-size: 14px;">Hello with Inter font</p>

#### 4. **Make sure the fonts are physically in the correct folder** (`storage/fonts`) and readable.

—

### ⚠️ Common Gotchas:
– **Don't rely only on CSS from external files** — make sure it’s inline or embedded.
– **Font name in CSS must exactly match** the key used in the `fonts` array.
– If you're using `Pdf::loadView(…)`, embed the CSS inline or via “ tags in the Blade file.

Would you like me to give you a small Blade example with multiple fonts switching in a DomPDF view?

User

but .manrope-text {
font-family: 'manrope';
}
.inter-text {
font-family: 'inter';
}
not work

Assistant

Thanks for confirming. If the CSS class-based font-family like `.manrope-text { font-family: 'manrope'; }` isn’t working in DomPDF, it’s usually due to one of the following **three issues**:

—

### ✅ Fix Checklist

#### 1. **Use `@font-face` to define the font fully**
DomPDF sometimes needs explicit `@font-face` declarations, even if fonts are registered in `config/dompdf.php`.

Add this at the top of your Blade view or inside a “ block:

<style>
  @font-face {
    font-family: 'manrope';
    src: url("{{ storage_path('fonts/Manrope-Regular.ttf') }}") format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'inter';
    src: url("{{ storage_path('fonts/Inter-Regular.ttf') }}") format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  .manrope-text {
    font-family: 'manrope';
  }

  .inter-text {
    font-family: 'inter';
  }
</style>

> 🧠 DomPDF uses its own HTML renderer — it doesn’t access Laravel’s `storage_path()` automatically, so be sure the paths resolve correctly during view rendering.

—

#### 2. **Use absolute file paths**
DomPDF doesn’t understand Laravel-style helpers like `asset()` or `url()` unless `enable_remote` is `true` and file access is allowed. Instead:

src: url('file:///absolute/path/to/storage/fonts/Manrope-Regular.ttf')

Laravel Blade:

src: url("file://{{ storage_path('fonts/Manrope-Regular.ttf') }}")

—

#### 3. **Double-check CSS is inlined**
DomPDF may ignore external or “ files. Always inline your styles using “ or inline on the element:

<p style="font-family: 'inter';">This works better</p>

—

### ✅ Recommended Best Practice (No @font-face)

If you registered your fonts in `config/dompdf.php`, then directly inline the font:

<p style="font-family: inter;">This uses Inter</p>
<p style="font-family: manrope;">This uses Manrope</p>

This works because DomPDF maps `font-family: inter` to your `'inter' => […]` entry.

—

Would you like a working `Pdf::loadView()` example that switches between both fonts in a Blade view?

User

manrope font now applied but letter spacing more

Assistant

If **Manrope** is rendering with extra letter spacing in DomPDF, it's likely due to:

1. DomPDF's font metric interpretation (not 100% pixel-perfect like browsers).
2. Absence of CSS reset for `letter-spacing`.

—

### ✅ Fix: Reset `letter-spacing`

Add the following CSS to your Blade view:

<style>
  body, p, h1, h2, h3, h4, h5, h6, span, div {
    letter-spacing: 0 !important;
  }

  .manrope-text {
    font-family: 'manrope';
    letter-spacing: 0 !important;
  }
</style>

—

### ✅ Optional: Fine-tune if needed

If text still looks off, try manually adjusting:

letter-spacing: -0.2px; /* or try -0.1px */

This can visually balance spacing issues introduced by DomPDF's rendering engine.

—

Would you like to apply a full typography reset (margin, padding, font-size, line-height, letter-spacing) for consistency?

Leave a Comment Cancel