Setting a font using DOMPdf in laravel

29 views Asked by At

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 ?????????

1

There are 1 answers

2
rakshitjat On
<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.