Setting a font using DOMPdf in laravel

Question

I am trying to generate a pdf in laravel and then set the font-family in the css of the page so that the generated pdf uses this font-family. I am using this package: https://github.com/barryvdh/laravel-dompdf alongside laravel.

My api does the following:

$pdf = Pdf::loadView('myview', \['view1' =\> $view1, 'view2' =\> $view2\]);
return $pdf-\>stream('myview.pdf');

myview is a blade file that i am streaming to create the pdf. Above my body and below my head i have the following: `

* {
    font-family: 'DejaVuSans';
}

`

My ttf file is in: vendor\dompdf\dompdf\lib\fonts\DejaVuSans.ttf. Which according to the documentation is correct.

I've tried different ways of writing it such as by adding sans-serif and adding a space but its all the same issue.

I also tried moving the font folder to my storage/fonts folder but i had the same issue. What i need is for the font to be set on load so that the greek and russian text appears correctly as it is currently appearing as ?????????

You need to add in blade file, <head><style></style><head>

rakshitjat
– rakshitjat

2024-03-27 13:22:56 +00:00
Commented Mar 27, 2024 at 13:22 — rakshitjat
– rakshitjat, Commented Mar 27, 2024 at 13:22
That didnt change anything

Daniel el khal
– Daniel el khal

2024-03-27 13:26:25 +00:00
Commented Mar 27, 2024 at 13:26 — Daniel el khal
– Daniel el khal, Commented Mar 27, 2024 at 13:26

rakshitjat · Accepted Answer · 2024-03-27 13:26:06Z

1

<html>
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: "Lato", Arial, Helvetica, sans-serif;
            background-color: #f1f1f1;
            -webkit-text-size-adjust: none;
            text-size-adjust: none;
        }

        .main_heading img {
            height: 30px;
        }

        @media (max-width: 819px) {
            .main_body {
                width: 100% !important;
            }

            .main_heading img {
                height: 26px;
            }

            .main_content {
                width: 100% !important;
                margin: 0 !important;
            }

            .otp-detail {
                width: 35%;
            }
        }

        @media (max-width: 576px) {
            .otp-detail {
                width: 22%;
            }
        }

        @media (max-width: 480px) {
            .otp-detail {
                width: 5%;
            }
        }
    </style>
</head>
<body>

    your content

</body>
</html>

I have used this in my project you can try it.

answered Mar 27, 2024 at 13:26

rakshitjat

1761 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel el khal Over a year ago

This Changed nothing. The issu is that the font family is not being applied. No matter what i change in my style.

rakshitjat Over a year ago

I apply the font-family to the body tag font-family: "Lato", Arial, Helvetica, sans-serif;

Mit Kathrotia · Accepted Answer · 2024-04-01 08:40:22Z

0

If you want to use external fonts using font files, you need to put font files into a storage folder. And then you need to add those fonts using @font-face.

Here is an example,

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

answered Apr 1, 2024 at 8:40

Mit Kathrotia

4493 silver badges14 bronze badges

Collectives™ on Stack Overflow

Setting a font using DOMPdf in laravel

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related