We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom icon font not rendering on HTML to PDF converter

Thread ID:

Created:

Updated:

Platform:

Replies:

150013 Dec 18,2019 12:47 AM UTC Dec 30,2019 05:35 AM UTC ASP.NET MVC - EJ 2 6
loading
Tags: PDF
Juan Jiminez
Asked On December 18, 2019 12:47 AM UTC

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 [Syncfusion]
Replied On December 18, 2019 04:31 PM UTC

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 20th 2019. 

Regards, 
Gowthamraj K 


Prakash Viswanathan [Syncfusion]
Replied On December 20, 2019 09:37 AM UTC

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.  

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

Regards, 
Prakash V 


Juan Jiminez
Replied On December 23, 2019 08:22 PM UTC

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.


Attachment: PDF_Conversion_error_279fdb2f.zip

Gowthamraj Kumar [Syncfusion]
Replied On December 24, 2019 04:20 PM UTC

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; 
  

Please refer the below troubleshooting steps for Blink, 
  
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. 
  
Can you please let us know whether the reported HTML string conversion is works on server?  
  
  
Regards, 
Gowthamraj K 


Juan Jiminez
Replied On December 24, 2019 10:39 PM UTC

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 [Syncfusion]
Replied On December 30, 2019 05:35 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon