Using Custom font Generated PDF with wkhtmltopdf is not opened in any browser

AaviJit commented 4 years ago

In my recent project, I had to make a pdf report of HTML file using wkhtmltopdf with a custom font in a spring boot project. But the problem is when I use a custom font, generated pdf is not opened with chrome and firefox browser. But that pdf is opened on default pdf viewer of ubuntu. When I don't use a custom font, that pdf is visible everywhere.

Html code of generated pdf is

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>OrderList</title>
    <meta charset="utf-8">
    <link rel="stylesheet"
          href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="http://fonts.maateen.me/siyam-rupali/font.css" rel="stylesheet">

    <style>
        * {
            font-family: 'SiyamRupali', Arial, sans-serif !important;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="margin: 15px">

        <p style="text-align:center;">

        </p>
        <br/>
        <table class="table table-striped" border="1">
            <tr>
                <th>S/N</th>
                <th>Create Date</th>
                <th>Action Date</th>
                <th>Reference No</th>
                <th>Merchant Reference</th>
                <th>Sender Name</th>
                <th>Pickup Address</th>
                <th>Receiver Name</th>
                <th>Receiver Address</th>
                <th>Area</th>
                <th>Status</th>
                <th>Rider</th>
                <!--<th>Product Type</th>-->
                <th>Service Charge</th>
                <th>Value Of Goods</th>
                <th>Cash On Delivery</th>
            </tr>
            <tr th:each="order, iterator : ${orders}">
                <td th:text="${iterator.index+1}" align="center"></td>
                <td th:text="${order.orderDate}"></td>
                <td th:text="${order.statusDTO.date}"></td>
                <td th:text="${order.orderRef}"></td>
                <td th:text="${order.merchantOrderRef}"></td>
                <td th:text="${order.senderName}"></td>
                <td th:text="${order.pickupAddress}"></td>
                <td th:text="${order.receiverName}"></td>
                <td th:text="${order.receiverAddress}"></td>
                <td>Dhaka</td>
                <td th:text="${order.statusDTO.status}"></td>
                <td th:text="${order.responsibleRider}"></td>
                <td th:text="${order.serviceCharge}"></td>
                <td th:text="${order.productPrice}"></td>
                <td th:text="${order.totalCharge}"></td>
            </tr>
        </table>
    </div>
</div>
</body>
<style>
    th, td {
        text-align: center;
    }
</style>
</html>

If I use this style, generated pdf is not opened on chrome browser.

<style>
            * {
                font-family: 'SiyamRupali', Arial, sans-serif !important;
            }
 </style>

But if I don't use this style, pdf is viewable everywhere without showing special character. Any help will be appreciated.

PhilterPaper commented 4 years ago

What happens if you use

    body {
        font-family: 'SiyamRupali', Arial, sans-serif !important;
    }

instead? And is the font being embedded in your PDF? You haven't set any switches to disable embedding, have you? Or are you counting on the target machine (reader) having this font installed?

AaviJit commented 4 years ago

@PhilterPaper Yes, I tried using this CSS. But Pdf is not being opened by any browser.

body {
        font-family: 'SiyamRupali', Arial, sans-serif !important;
    }

No, I haven't set any switches. How can I do that? Can you help me?? And font has installed in reader machine.

ashkulz commented 4 years ago

Does it work with Google Fonts? It could be a problem in the way the specific font you're using was generated.

PhilterPaper commented 4 years ago

The version I use (0.12.5 with patched qt, on Windows) doesn't have any command-line switches to control font embedding, but perhaps the specific version you use does. You'll have to ask for --help (or something similar) to get a listing of all switches you can use. Anyway, this is of importance if the target machine (reader machine) does not have this font installed. It would have to fall back to some other font (possibly Arial or a generic sans-serif, or try to match what the reader thinks is the closest font it has.

When you say that the PDF is "not opened", is it actually failing to open at all on some common readers (but not on the Ubuntu reader)? Do you get any error messages? Or is it just failing to display these Bengali characters, while properly displaying any ASCII characters? You might want to try forcing some ASCII text using Arial, just to see if the rest of the PDF is OK. Can you tell if it's using the desired font when it does display, or is it substituting a different font? Have you tried Adobe Acrobat Reader? It's the Gold Standard for PDF readers. Chrome and FireFox are primarily HTML browsers; I think they have to load some extra program to read PDFs (but I might be wrong). Is the HTML you gave the input to some display program (which fills in the data fields to create pure HTML), or is it what you're actually converting in wkHTMLtoPDF what you showed?

AaviJit commented 4 years ago

@PhilterPaper If I use style, the generated pdf can be viewed on ubuntu default reader(As I using Ubuntu system) and mozila firefox(In ubuntu). And Bengali fonts are shown perfectly. But when I tried to open that pdf on chrome browser, the browser shows this message. Screenshot from 2020-06-07 14-20-31

And that pdf is not viewed on foxit reader and acrobat reader also.

PhilterPaper commented 4 years ago

That's very strange. As I understand it,

PDF produced on Ubuntu, using a specific Bengali font, displays (reader) OK on any Ubuntu platform with the font installed, using either the built-in Reader or Firefox. Chrome and Adobe Readers both fail to load the document.

PDF transferred to Windows, displays ???? on Adobe Reader, Chrome, Firefox?

Can you hand-build a simple HTML, using the Bengali font for at least part of it? Do not use anything that post-processes the HTML into something displayable in a browser, i.e., no entries such as <td th:text="${order.orderRef}"></td>, just <td>Some Bengali text here</td>. At least you can see if this post-processing stuff is somehow messing up wkHTMLtoPDF, or if it is really font-related.

AaviJit commented 4 years ago

@PhilterPaper PDF transferred to Windows, displays ???? on Adobe Reader, Chrome, Firefox? Yes, I did try on windows. In windows no browsers and pdf reader can open it. <td>Some Bengali text here</td> Ok, In will try using ony this.

AaviJit commented 4 years ago

@ashkulz , Yes sir, I tried using google font. But didn't get the desired output. It could be a problem in the way the specific font you're using was generated. How can I solve this?

AaviJit commented 4 years ago

@PhilterPaper I tried only using <td> আমি খুব পেরা খাচ্ছি</td> But nothing happened. Only opened on chrome and default ubuntu viewer.

ashkulz commented 4 years ago

Can't you use another Bengali font?

PhilterPaper commented 4 years ago

@ashkulz , do you know when wkHTMLtoPDF embeds a font, and when it doesn't? Since the produced PDF works in some cases, my suspicion is that it's not embedding the font, but relying on its being on the Reader machine. Maybe this particular font is installed in such a way that not all Readers are able to access it, but some are? That's all I can think of.

AaviJit commented 4 years ago

@ashkulz Can't you use another Bengali font? Sir, I tried several bangla font, even google bangla font. But Same things happens

ashkulz commented 4 years ago

Can you post actual HTML and CSS used, along with command lines?

ashkulz commented 4 years ago

@PhilterPaper that's normally done at the Qt level, and it is on by default. Hence asking for reproducible test case to figure out what's going on.

AaviJit commented 4 years ago

@ashkulz , Sir, all I posted on the question that I used to generate pdf from HTML. And sir I was generating this pdf with java program.

ashkulz commented 4 years ago

That doesn't have any Bengali text at all?

AaviJit commented 4 years ago

@ashkulz Sir, this HTML page is generated dynamically by sending data from the controller and then generate that HTML as pdf. And Bangla text are retrieved from the database. I also tried simply putting <td> আমি খুব পেরা খাচ্ছি</td> this. But the same result...

ashkulz commented 4 years ago

@AaviJit can you attach the PDF? I suspect it's the same problem as #4705

AaviJit commented 4 years ago

@ashkulz OrderReport.pdf This is the generated pdf file. Used style for showing bangla font. Visible in ubuntu default pdf viewer and mozilla browser. But not viewed on chrome and onther pdf viewer both in ubuntu and windows.

ashkulz commented 4 years ago

Same problem as the above ticket -- you're using the distribution provided package, not the one from the downloads page. Please do that and reopen if you face an issue.

AaviJit commented 4 years ago

@ashkulz Sir is it because of version? I used the command sudo apt-get install xvfb libfontconfig wkhtmltopdf to install wkhtmltopdf. Which command I should use to install now?

ashkulz commented 4 years ago

Please use the binaries from the download page.

AaviJit commented 4 years ago

@ashkulz Sir, I have changed to the recent version of wkhtmltopdf. But nothing special happened :(. What should I do now ? Screenshot from 2020-06-09 22-14-26 OrderReport.pdf

wkhtmltopdf / wkhtmltopdf

Using Custom font Generated PDF with wkhtmltopdf is not opened in any browser #4703