How to add the Custom font #1566

xploregopi · 2017-10-04T09:30:49Z

My external css

@media print {
@font-face{font-family:'Tondo';src:url("assets/fonts/glyphicons-halflings-regular.ttf");font-weight:normal}
}

@font-face{font-family:'Tondo';src:url("assets/fonts/glyphicons-halflings-regular.ttf");font-weight:normal}

This is not working. Any idea please

The text was updated successfully, but these errors were encountered:

bsweeney · 2017-10-04T14:16:46Z

How are you loading your document? loadHtml or loadHtmlFile?

xploregopi · 2017-10-05T07:31:49Z

HI,
I am using $dompdf->loadHtml($code);

bsweeney · 2017-10-05T14:37:12Z

You'll want to confirm a few thing.

You're using a relative path so make sure it's relative to the working directory where PHP is executing.
You have read/write access to the font and font cache directories.
You might try filling out your @font-face declaration to see if maybe it's a parsing error on our end, e.g.

@font-face {
  font-family: Tondo;
  font-weight: normal;
  font-style: normal;
  src: url("assets/fonts/glyphicons-halflings-regular.ttf") format("truetype");
}

xploregopi · 2017-10-09T10:55:41Z

Hi Bsweeney,

Finally i using google fonts. It's working fine. Thanks for you support.

bsweeney · 2017-10-16T22:11:49Z

Glad you were able to get it working.

patrick2k12 · 2020-02-27T12:53:53Z

Anyone who is still looking for a solution. I have full proof solution for it:

while delaring @font-face make sure to use font weight:
font-weight: normal;
Try to name your font family in lower case.
when assigning that font family, make sure to define font weight. For example:
font-weight: normal;
Always define font weights if normal,bold or anything. and while using that font family make sure to use font weight again, even if it is normal
This code worked for me

@font-face { 
font-family: newcents; 
font-weight: normal; 
font-style: normal; src: url('fonts/century.ttf') format('truetype'); 
} 
@font-face { 
font-family: newfrank; 
src: url('fonts/franklin.ttf') format('truetype');  
font-weight:normal;
} 

h1{
font-family:newcents; 
color:red;font-weight:normal;
}
h2{
font-family:newfrank; 
color:green;
font-weight:normal;
}

One other reason might be: Dom PDF not creating font cache.

check /lib/fonts and see if it automatically created your custom font files here or not.
If not then make this folder writable and try to reload the page. It should work.
if it still doesn't work then clone the dompdf in separate folder and try there. If it works then you can copy lib/fonts folder from there and replace in your main website.

iamniels · 2020-12-09T20:02:29Z

For others coming across this issue. Dompdf is not loading fonts from uri's with a port number, for example: http://localhost:8000.

ahmedbondok2006 · 2021-05-18T21:29:21Z

<!doctype html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>السلام عليكم</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        font-size: 14px;
        background-image: linear-gradient(315deg, #9fa4c4 0%, #9e768f 74%);
        font-family: sans-serif;
        background-size: cover;
    }

    h1 {
        font-size: 22px;
    }

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        padding: 30px;
        background: #fff;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: 0 15px;
        50px rgba(0, 0, 0, .2)
    }

    .image {
        width: 200px;
        height: 200px;
        background: url(authr.jpg);
        background-size: cover;
        float: left;
        margin: 30px 30px 30px 0;
    }
</style>
<body>


<div class="navbar navbar-expand-lg navbar-light bg-light print-hide">
    <a class="navbar-brand" href="#">Laravel Export PDF</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a href="javascript:void(0)" class="nav-link" onclick="export2Pdf()">Download PDF</a>
            </li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="image"></div>
    <h1>Some Random Text Title Content</h1>
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dicta dolorem, expedita
            ipsum maiores quas sapiente vero. Beatae dolore dolores ducimus eos, iusto laborum possimus quibusdam
            reprehenderit
            soluta vero voluptatibus?. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores atque,
            blanditiis consequuntur cupiditate, delectus ea facilis ipsam laborum magni maiores molestiae natus porro quod
            recusandae saepe sequi sint!. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto esse facere
            ipsum ratione. Adipisci animi cumque eligendi excepturi harum praesentium quia. Aperiam cum, error molestiae quae
            quaerat repudiandae unde?. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequatur culpa cum
            debitis deserunt dolor, et expedita fugiat labore minus modi nam nostrum provident quam quasi quo veniam voluptas
            voluptates.
        </p>
    </div>

    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>الاسم</th>
            <th>الاسم</th>
            <th>الاسم</th>
            <th>الاسم</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>احمد سامى</td>
            <td>احمد سامى</td>
            <td>احمد سامى</td>
            <td>احمد سامى</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

**### my page this i use version 1.0.2

i added this folder i18N for arabic problem i can not use any font except devau
neet to use tajwal**

Noman-ilyas · 2021-06-29T16:00:55Z

<!doctype html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>السلام عليكم</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        font-size: 14px;
        background-image: linear-gradient(315deg, #9fa4c4 0%, #9e768f 74%);
        font-family: sans-serif;
        background-size: cover;
    }

    h1 {
        font-size: 22px;
    }

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 600px;
        padding: 30px;
        background: #fff;
        box-sizing: border-box;
        border-radius: 10px;
        box-shadow: 0 15px;
        50px rgba(0, 0, 0, .2)
    }

    .image {
        width: 200px;
        height: 200px;
        background: url(authr.jpg);
        background-size: cover;
        float: left;
        margin: 30px 30px 30px 0;
    }
</style>
<body>


<div class="navbar navbar-expand-lg navbar-light bg-light print-hide">
    <a class="navbar-brand" href="#">Laravel Export PDF</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a href="javascript:void(0)" class="nav-link" onclick="export2Pdf()">Download PDF</a>
            </li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="image"></div>
    <h1>Some Random Text Title Content</h1>
    <div class="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dicta dolorem, expedita
            ipsum maiores quas sapiente vero. Beatae dolore dolores ducimus eos, iusto laborum possimus quibusdam
            reprehenderit
            soluta vero voluptatibus?. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab alias asperiores atque,
            blanditiis consequuntur cupiditate, delectus ea facilis ipsam laborum magni maiores molestiae natus porro quod
            recusandae saepe sequi sint!. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto esse facere
            ipsum ratione. Adipisci animi cumque eligendi excepturi harum praesentium quia. Aperiam cum, error molestiae quae
            quaerat repudiandae unde?. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequatur culpa cum
            debitis deserunt dolor, et expedita fugiat labore minus modi nam nostrum provident quam quasi quo veniam voluptas
            voluptates.
        </p>
    </div>

    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>الاسم</th>
            <th>الاسم</th>
            <th>الاسم</th>
            <th>الاسم</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>احمد سامى</td>
            <td>احمد سامى</td>
            <td>احمد سامى</td>
            <td>احمد سامى</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

**### my page this i use version 1.0.2

i added this folder i18N for arabic problem i can not use any font except devau
neet to use tajwal**

unable to unserstand how you can use bootstrap in Dompdf

Nexample-G · 2021-08-27T17:59:34Z

Use This Step Working 100% import Any Font in dompdf
https://youtu.be/ZBEAylHxtGo

bsweeney added the question label Oct 16, 2017

bsweeney closed this as completed Oct 16, 2017

patrick2k12 mentioned this issue Feb 27, 2020

Custom Font not working #1401

Closed

simonberger mentioned this issue Feb 28, 2020

DomPDF importing custom font is not working #2101

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to add the Custom font #1566

How to add the Custom font #1566

xploregopi commented Oct 4, 2017 •

edited by bsweeney

bsweeney commented Oct 4, 2017

xploregopi commented Oct 5, 2017

bsweeney commented Oct 5, 2017

xploregopi commented Oct 9, 2017

bsweeney commented Oct 16, 2017

patrick2k12 commented Feb 27, 2020 •

edited

iamniels commented Dec 9, 2020

ahmedbondok2006 commented May 18, 2021 •

edited by bsweeney

Noman-ilyas commented Jun 29, 2021

Nexample-G commented Aug 27, 2021

How to add the Custom font #1566

How to add the Custom font #1566

Comments

xploregopi commented Oct 4, 2017 • edited by bsweeney

bsweeney commented Oct 4, 2017

xploregopi commented Oct 5, 2017

bsweeney commented Oct 5, 2017

xploregopi commented Oct 9, 2017

bsweeney commented Oct 16, 2017

patrick2k12 commented Feb 27, 2020 • edited

iamniels commented Dec 9, 2020

ahmedbondok2006 commented May 18, 2021 • edited by bsweeney

Noman-ilyas commented Jun 29, 2021

Nexample-G commented Aug 27, 2021

xploregopi commented Oct 4, 2017 •

edited by bsweeney

patrick2k12 commented Feb 27, 2020 •

edited

ahmedbondok2006 commented May 18, 2021 •

edited by bsweeney