Fonts are not preserved properly when using html to pdf conversion library

[Jagadish]

Hi Team,

I am using the Syncfusion html to pdf library to convert the html string to pdf in my project. I am able to set the width of the content using the Blink Converter Settings (ViewPort). But the fonts are not matching the original html string. Kindly let me know the solution for this.

Attached the images of generated PDF.

Generated PDF using other third party library:

Generated PDF using Syncfusion library:

Thanks,

Jagadish

Attachment: html_syncfusion_9aa0de87.zip

[Karmegam Seerangan]

Hi Jagadish,

Thank you for reaching out to Syncfusion support.

 

Our HTML converter internally uses the Blink rendering engine. It utilizes a Chrome headless browser for converting HTML to PDF. It will preserve the PDF document in the same way as the input HTML/URL is displayed in Chromium-based web browsers such as Chrome and print preview. Our converter replicates this same behavior.

 

We have checked the provided HTML text in Chrome print preview, and the same result was replicated in our converter. However, we have attached the sample, output document, and screenshot for your reference.

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blink_Font_Issue1739413158

Output: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HTML-to-PDF1256193119

 

Chrome print preview screenshot:

 

Syncfusion screenshot:

 

Kindly try the provided sample and let us know the result. If you are still facing issues, we kindly request you to share the modified sample, complete code snippet, package name, package version, and environment details with us to replicate the same issue on our end. It will be more helpful for us to analyze and provide you with a prompt solution.

Regards,

Karmegam

[Jagadish]

Hi Karmegam,

I have attached the files to find the difference of the fonts. You can see the difference in the Terms and conditions section.

Packages used:

<PackageReference Include="Syncfusion.HtmlToPdfConverter.Net.Windows" Version="24.2.9" />

<PackageReference Include="Syncfusion.Licensing" Version="24.2.9" />

Syncfusion code:

//Initialize HTML to PDF converter

HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter();

//Initialize blink converter settings.

BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings();

//Set Blink viewport size.

blinkConverterSettings.ViewPortSize = new Size(420, 0);

//Assign Blink converter settings to HTML converter.

htmlConverter.ConverterSettings = blinkConverterSettings;

//Convert URL to PDF

PdfDocument document = htmlConverter.Convert(membershipApprovalDoc, _sharePointOptions.FilesUploadTempFolder);

FileStream fileStream = new FileStream(path, FileMode.CreateNew, FileAccess.ReadWrite);

//Save and close the PDF document.

document.Save(fileStream);

document.Close(true);

Thanks,

Jagadish

Attachment: iText7_Membership_Documentation_Acceptance_PDSLaceyModernD_ContinuumOfCare_11_03_2024_05_29_21_7356a00.zip

[Karmegam Seerangan]

Thank you for providing the details. As we mentioned previously, we have checked the provided input HTML in Chrome print preview, and the same result was replicated in our converter. However, we have modified the input HTML for your expected result. Please find the below screenshot.

Modified HTML: https://www.syncfusion.com/downloads/support/directtrac/general/ze/html_syncfusion-369801006

Output document: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HTML-to-PDF-1046199231

 

Kindly check your input HTML input file in Chrome's print preview. Kindly try the provided solution and let us know the result.

[Sam Konstas Smith]

Hey Jagadish,

I have faced similar issue last week. Font rendering issues in HTML to PDF conversion often come down to how fonts are embedded, supported, or substituted during the process. Ensuring proper font files, encoding, and compatibility can make a noticeable difference in preserving design consistency. Tools like schriftartengeneratorr can also help in testing and previewing different font styles, which may assist in identifying what works best before finalizing the conversion setup.

[Arumugam Muppidathi]

Hi Sam,

Thank you for getting back to us.

 

We have investigated the reported issue on our end. After further analysis, we were unable to replicate the issue and the custom font is rendered properly as expected in the output PDF document.  Please note that when using custom fonts during HTML-to-PDF conversion, it is essential to specify the base URL as an argument in the Convert() method. The base URL represents the folder path where the resources used in the HTML such as images, style sheets, scripts, and font files are located.

 

For additional details, please refer to the documentation below:

HTML to PDF converter features in .NET PDF Library | Syncfusion

 

Below is the code snippet:

//Initialize the HTML to PDF converter.

HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter();

BlinkConverterSettings settings = new BlinkConverterSettings();

settings.Scale = 1.0f;

htmlConverter.ConverterSettings = settings;

string html = System.IO.File.ReadAllText("../../index.html");

string baseUrl = Path.GetFullPath("../../"); //use base path to load local resources like fonts

PdfDocument document = htmlConverter.Convert(html, baseUrl);

//Save and close the PDF document.

document.Save("Output.pdf");

//Close the document

document.Close(true);

 

This approach ensures that custom fonts are correctly preserved and embedded in the output PDF.

 

Please refer to the screenshot below, which confirms that the "Inter" font is successfully embedded as a TrueType font.

 

 

 

We used the Inter font as the custom font and placed it inside the fonts folder, which is located in the same directory as the .csproj file.

 

We have also attached the sample project along with the output PDF for your reference.

 

Please review this information and let us know your results. If you continue to experience any issues, we kindly request you to share the following details to help us analyze the problem more effectively:

 

• Modified sample or project
• Complete code snippet
• Input HTML file
• Syncfusion package name and version
• .NET Framework/.NET Core version

 

This information will help us provide a quicker and more accurate solution.

Regards,

Arumugam M

Attachment: HTMLtoPDFFrameworkSampleCustomFont_bfda8011.zip