Font weight css is not working when using Itext's pdfHTML to convert html to pdf

Question

This is how I am converting HTML to pdf:-

  File pdfDest = new File("output");

  ConverterProperties converterProperties = new ConverterProperties();

  HtmlConverter.convertToPdf(html, new FileOutputStream(pdfDest), converterProperties);

Following is sample HTML to reproduce the issue:-

<html>

  <head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:wght@400;500;600;700" rel="stylesheet">

    <style>
     body {
       font-family: 'IBM Plex Sans', sans-serif;
       color: #444444;
      }


      .pt-16 {
        padding-top: 16px;
      }

      .pb-16 {
        padding-bottom: 16px;
      }


      .pr-4{
        padding-right: 4px;
      }


      .f-18 {
        font-size: 18px;
      }

 
      .font-weight-medium {
        font-weight: 400;
      }

      .font-weight-semibold {
        font-weight: bold;
      }

      .font-weight-bold {
        font-weight: bold;
      }


      .data {
        display: inline-block;
        padding-left: 14px;
        padding-top: 5px;
      }


    </style>
  </head>

  <body>

          <div class="pt-16">
            <div class="f-18 font-weight-semibold">4. Time Periods</div>
              <div class="pb-16">
                <div class="data">
                  <span class="pr-4">Some data -</span>
                  <span class="font-weight-medium">Lorem,</span>
                  <span class="font-weight-medium">Gypsum,</span>
                </div>
              </div>
          </div>
         
    
  </body>

</html>

Content as seen in browser:-

Content as seen in pdf:-

Clearly, CSS for making Text semibold/ bold is not working, how to fix this? The font seems to be correct, looks issue is only in the CSS

Open the result PDF and look at the properties, specifically the fonts. If your font is not there then you have not loaded those fonts in iText — Kevin Brown
@KevinBrown fonts seem to be correct, I have added the snapshot of pdf properties. Looks like the issue is with CSS on the font. — AConsumer
hard to use custom fronts and font weight in that, i also faced the same issue when i was doing, but you can use <strong> and <b> tags in that, this works fine in my case — Shivam
I would say the fonts are likely not correct. You have no bold font (they are different unless the PDF producer fakes bold). I see the answer below, now look at the properties when fixed. — Kevin Brown

Mohamed AMAZIRH Mohamed AMAZIRH · Accepted Answer · 2021-07-26T11:04:52

if you inspect the content of the url https://fonts.googleapis.com/css?family=IBM+Plex+Sans:wght@400;500;600;700, you'll see that it doesn't include the @font-face at-rules for the 500, 600 and 700 font-weight.

Apparently, the wght@ parameter is specific to google css v2 api (https://fonts.googleapis.com/css2) and is ignored in the previous version of the api (https://fonts.googleapis.com/css).

So you have to replace your url by :

https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700
or https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,500,600,700

Here is my test program (it outputs the pdf with the expected formatting, here the result) :

import com.itextpdf.html2pdf.ConverterProperties;
import com.itextpdf.html2pdf.HtmlConverter;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;

public class Main {
    public static void main(String[] args) throws FileNotFoundException {
    File pdfDest = new File("/tmp/output.pdf");

    ConverterProperties converterProperties = new ConverterProperties();

    HtmlConverter.convertToPdf(getHtml(), new FileOutputStream(pdfDest), converterProperties);
    }

    public static String getHtml(){
    return "<html>\n" +
            "\n" +
            "  <head>\n" +
            "    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\">\n" +
            "    <link href=\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700\" rel=\"stylesheet\">\n" +
            "\n" +
            "    <style>\n" +
            "     body {\n" +
            "       font-family: 'IBM Plex Sans', sans-serif;\n" +
            "       color: #444444;\n" +
            "      }\n" +
            "\n" +
            "\n" +
            "      .pt-16 {\n" +
            "        padding-top: 16px;\n" +
            "      }\n" +
            "\n" +
            "      .pb-16 {\n" +
            "        padding-bottom: 16px;\n" +
            "      }\n" +
            "\n" +
            "\n" +
            "      .pr-4{\n" +
            "        padding-right: 4px;\n" +
            "      }\n" +
            "\n" +
            "\n" +
            "      .f-18 {\n" +
            "        font-size: 18px;\n" +
            "      }\n" +
            "\n" +
            " \n" +
            "      .font-weight-medium {\n" +
            "        font-weight: 400;\n" +
            "      }\n" +
            "\n" +
            "      .font-weight-semibold {\n" +
            "        font-weight: bold;\n" +
            "      }\n" +
            "\n" +
            "      .font-weight-bold {\n" +
            "        font-weight: bold;\n" +
            "      }\n" +
            "\n" +
            "\n" +
            "      .data {\n" +
            "        display: inline-block;\n" +
            "        padding-left: 14px;\n" +
            "        padding-top: 5px;\n" +
            "      }\n" +
            "\n" +
            "\n" +
            "    </style>\n" +
            "  </head>\n" +
            "\n" +
            "  <body>\n" +
            "\n" +
            "          <div class=\"pt-16\">\n" +
            "            <div class=\"f-18 font-weight-semibold\">4. Time Periods</div>\n" +
            "              <div class=\"pb-16\">\n" +
            "                <div class=\"data\">\n" +
            "                  <span class=\"pr-4\">Some data -</span>\n" +
            "                  <span class=\"font-weight-medium\">Lorem,</span>\n" +
            "                  <span class=\"font-weight-medium\">Gypsum,</span>\n" +
            "                </div>\n" +
            "              </div>\n" +
            "          </div>\n" +
            "         \n" +
            "    \n" +
            "  </body>\n" +
            "\n" +
            "</html>\n";
    }
}

The maven dependencies:

<dependencies>
    <dependency>
        <groupId>com.itextpdf</groupId>
        <artifactId>html2pdf</artifactId>
        <version>3.0.5</version>
    </dependency>
</dependencies>

Font weight css is not working when using Itext's pdfHTML to convert html to pdf

1 Answers