如何使用laravel在DOMPDF中显示印地语字体？

Question

This is the pdf blade file in larval. It gives ? mark in pdf file.

@section('css')
    <meta name="viewport" content="width=device-width, initial-scale=1" >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
    <style>
        @font-face {
            font-family: 'Noto Sans', sans-serif;
            font-style: normal;
            font-weight: 400;
        }
    </style>
@endsection
@section('js')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
@endsection

       <div class="container">
            <h2>Leave Request Information</h2>
            <h3>Month - {{$month}} {{$year}}</h3>
            <br/>

            @if(isset($leavesRequest) && count($leavesRequest)>0)

                <table style="width:100%" border="1" cellspacing="0">
                    <thead>
                    <tr>
                        <th>S No.</th>
                        <th>अध्यापक कर्मचारी का नाम और पद</th>
                        <th>Name of school</th>
                        <th>Leave Type</th>
                        <th>Leave Status</th>
                        <th>Year</th>
                        <th>Month</th>
                        <th>Total Days</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php $i = 0; ?>
                    @foreach($leavesRequest as $status)
                        <?php ++$i; ?>
                        <tr>
                            <td style="text-align: center"><?php echo $i;?></td>
                            <td style="text-align: center"><?php echo $status->teacher->name;?></td>
                            <td style="text-align: center"><?php echo $status->school->name;?></td>
                            <td style="text-align: center">{{$status->leave_type}}</td>
                            <td style="text-align: center">{{$status->leave_status}}</td>
                            <td style="text-align: center">{{$status->leave_year}}</td>
                            <td style="text-align: center">{{$status->month_name}}</td>
                            <td style="text-align: center">{{$status->total_days}}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

            @else

                No data found

            @endif

        </div>

The resulting PDF looks like this:

Answer 1

I see two problems:

1. You don't specify the devanagari subset when referencing the font.

The default font subset served by Google Fonts usually includes only Latin characters (iso-8859-1). This is for performance reasons. To include the devanagari characters your font reference should be as follows:

<link href="https://fonts.googleapis.com/css?family=Noto+Sans&subset=devanagari" rel="stylesheet">

2. You don't actually specify that you want to use the font.

The only style you have attached to the page is the following:

<style>
    @font-face {
        font-family: 'Noto Sans', sans-serif;
        font-style: normal;
        font-weight: 400;
    }
</style>

but this CSS you use to reference a font file not to tell the HTML renderer (dompdf) to use the font. You can remove that code. To actually use the font in the document you can use the following style:

<style>
  * { font-family: Noto Sans, sans-serif; }
</style>

Some relevant resources:

• MDN @font-face
• MDN font-family
• CSS Tricks @font-family

---

Finally a note: I would recommend using the latest version of dompdf (currently 0.7.0) since font support improves with each release. There are some known, unresolved issues with the current release that could affect how your text renders ( see issue #655 ).