Custom icon font not rendering on HTML to PDF converter

[Juan Jiminez]

Hi SF,

I'm using the Blink converter (Essential PDF) to generate a PDF from and HTML string which includes a custom icon font using @font-face on an external CSS file but the icon isn't rendering on the PDF, it just displays a square (see attached image).

This is the relevant piece of my stylesheet:

@font-face {

    font-family: 'themify';

    src: url("http://field.floodlightsoft.com/Content/assets/fonts/themify.eot?-fvbane");

    src: url("/Content/assets/fonts/themify.eot?#iefix-fvbane") format("embedded-opentype"), url("/Content/assets/fonts/themify.woff?-fvbane") format("woff"), url("/Content/assets/fonts/themify.ttf?-fvbane") format("truetype"), url("/Content/assets/fonts/themify.svg?-fvbane#themify") format("svg");

    font-weight: normal;

    font-style: normal;

}

[class^="ti-"], [class*=" ti-"] {

  font-family: 'themify';

  speak: none;

  font-style: normal;

  font-weight: normal;

  font-variant: normal;

  text-transform: none;

  line-height: 1;

  /* Better Font Rendering =========== */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale; }

.ti-check:before {

    content: "\e64c";

}

this is the HTML piece:

<link rel='nofollow' href="~/Content/icons.css" rel="stylesheet" />

<i class="ti-check"></i>

and these are my PDf converter settings:

  BlinkConverterSettings settings = new BlinkConverterSettings

            {

                //WebKitPath = @"/bin/QtBinaries/",

                EnableBookmarks = true,

                EnableJavaScript = true,

                Margin = new PdfMargins { All = (float)25.0 },

                Orientation = PdfPageOrientation.Portrait,

                PdfPageSize = PdfPageSize.A4,                 

            };

            HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink)

            {

                ConverterSettings = settings,

            };

PdfDocument pdfDoc = htmlConverter.Convert(contentHtml, this.Base_URL);

This same code works when I render it on an MVC view.

Attachment: missing_icon_on_pdf_c84de0d2.zip

[Gowthamraj Kumar]

Hi Juan, 

Thank you for using Syncfusion products. 

We were able to reproduce the reported preservation issue with provided details and currently we are analyzing on this issue. We will update the further details by December 20^th 2019. 

Regards, 

Gowthamraj K 

[Prakash Viswanathan]

Hi Juan, 

Thank you for your patience.  

We have further analyzed about the reported preservation issue. The reported issue occurs due to font has been blocked by the CORS policy in the intermediate HTML file. (No 'Access-Control-Allow-Origin' header is present on the requested resource.).  

 

When converting HTML string to PDF, we internally create a temporary HTML file with provided HTML string and base URL for further conversion. When the checking the preservation issue in intermediate HTML file, the symbol is not preserved in intermediate HTML file itself. On further analysis, the font has been blocked by the CORS policy on web browser. I have attached the steps to create intermediate HTML file. Kindly create a file and check the reported issue is occurs in HTML file itself on chrome browser.  

Note: Kindly save the below content as HTML file and change the base rel='nofollow' href with your base URL to reproduce the issue in HTML file itself.  

<BASE HREF="http://localhost:56559" /> 

<div class="jumbotron"> 

    <h1>ASP.NET</h1> 

    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> 

    <p><a rel='nofollow' href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p> 

</div> 

<link rel='nofollow' href="/Content/icon.css" rel="stylesheet" /> 

<i class="ti-check"></i> 

 

Blink rendering engine internally make use of chromium for converting HTML to PDF, so the output PDF document will be preserved as like how the input HTML file is displayed on the web browser (chrome). We tried the URL to PDF conversion instead of HTML string conversion, the symbol is preserved properly. The font is only accessible for the web application, so it is not blocked while converting URL to PDF. So, we are suggest you to try the URL to PDF conversion. Please refer below link for more information.  

UG: https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink#url-to-pdf  

Please let us know if you need any further assistance on this.  

Regards, 

Prakash V 

[Juan Jiminez]

Hi Prakash,

I tried URL to PDF and it works well on my local (loading external fonts) but it produces a blank PDF once published to the server (IIS on Windows Server 2019).

Using HTML to PDF works well on the server. See attached sample for reference.

By the way, it may be related with this other issue https://www.syncfusion.com/forums/150089/issues-when-converting-html-to-pdf-on-deployed-site.

Attachment: PDF_Conversion_error_279fdb2f.zip

[Gowthamraj Kumar]

Hi Juan, 

  

Thank you for your update. 

  

Queries	Response
I tried URL to PDF and it works well on my local (loading external fonts) but it produces a blank PDF once published to the server (IIS on Windows Server 2019).	We have tried to reproduced the reported blank PDF issue, but it is working properly. Can you please ensure the webpage URL is accessible or not in server web browser and kindly try the additional delay to the converter for loading the external resources (styles, scripts, images etc.,). Please find the code snippet for additional delay from below,   //Set additional delay; units in milliseconds  Settings.AdditionalDelay = 3000;     Additional Delay: https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink#additional-delay  Please refer the below troubleshooting steps for Blink,  UG: https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink#troubleshooting     If still you are facing the same issue, can you please provide more details such as complete input HTML file/URL (with resource style, scripts, etc.,), complete code snippet, server details (bit version, RAM, processor) product version to reproduce the issue. So, that it will be helpful for us to analyze and assist you further on this.
Using HTML to PDF works well on the server. See attached sample for reference.     By the way, it may be related with this other issue https://www.syncfusion.com/forums/150089/issues-when-converting-html-to-pdf-on-deployed-site.	Can you please let us know whether the reported HTML string conversion is works on server?

  

  

Regards, 

Gowthamraj K 

[Juan Jiminez]

Hi Gowthamraj,

Thank you for the provided info, it helped me realize (by using a local Chrome browser) that the server wasn't resolving the website DNS internally, so after adding the proper record to my host file it now loads the PDF correctly with the URL to PDF approach. 

Best,

[Prakash Viswanathan]

Hi Juan, 

We glad to know that the issue has been resolved. Please let us know if you need any further assistance on this.  

Regards, 

Prakash V