Intermittent font rendering in HTML to PDF conversion using Aspose.HTML

Aspose.HTML Cloud Product Family
1

Hello - I’m currently converting HTML string to PDF in memorystream but I’m currently encountering intermittent issue with regards to fonts. Fonts used in the HTML are google fonts but there are times that it is not rendering properly. Any Idea how to fix this?

Sample HTML

<div class="estimate-fonts">
  <link type="text/css" rel="stylesheet" href="
https://fonts.googleapis.com/css?family=Zeyada">
</div>
<div style="text-align: center; padding: 5.74px 9.6px 3.86px; font-size: 11px; color: rgb(219, 56, 56); background-color: rgb(245, 231, 18); border-color: rgb(77, 77, 77); border-width: 2px; font-family: Zeyada; border-style: solid;">Estimate Summary</div>

I’m using this code to render

' Initialize an HTML document from the HTML string
Using document As New Aspose.Html.HTMLDocument(htmlPage.PageHTML, "")

    ' Initialize PdfDevice with the output stream
    Using pdfDevice As New Aspose.Html.Rendering.Pdf.PdfDevice(pdfOptions, pageStream)
        ' Render the HTML document to PDF
        Dim renderer As New Aspose.Html.Rendering.HtmlRenderer()
        renderer.Render(pdfDevice, document)
    End Using
End Using

I’m using Aspose.HTML version 24.8

2

@kdepadua

It seems you are experiencing intermittent issues with font rendering when converting HTML to PDF using Aspose.HTML, particularly with Google Fonts. Here are some suggestions to help resolve this issue:

  1. Ensure Proper Font Linking: Make sure that the Google Fonts link is correctly included in your HTML. Sometimes, network issues or restrictions can prevent the font from loading properly. You can test the link directly in a browser to confirm it is accessible.

  2. Use @font-face for Custom Fonts: If you continue to face issues, consider using the @font-face rule to define the font in your CSS. This approach allows you to host the font files on your own server or a CDN, ensuring they are always available during the conversion process. Here’s an example of how to implement this:

    @font-face {
    font-family: 'Zeyada';
    src: url('https://fonts.googleapis.com/css?family=Zeyada');
}

    Then, apply the font in your HTML as you have done.

  3. Check Aspose.HTML Version: You mentioned using Aspose.HTML version 24.8. Ensure that you are using the latest version of the library, as updates may include bug fixes and improvements related to font rendering.

  4. Network Stability: Since the fonts are being fetched from an external source, ensure that your network connection is stable during the conversion process. Intermittent connectivity issues can lead to fonts not being rendered correctly.

  5. Fallback Fonts: Consider specifying fallback fonts in your CSS. This way, if the primary font fails to load, the browser will use the fallback font instead, which can help maintain the layout and readability of your PDF.

If these suggestions do not resolve the issue, you may want to check the Aspose documentation or community forums for additional insights or similar cases.

Sources:
[1]: CSS font-family not being respected, only default system font working

3

Hi @kdepadua , thank you for the request! Please take a look on a reply from our bot. Most likely it has solution. If not or you need more clarification please kindly resubmit your question on our another forum here Aspose.HTML Product Family - Free Support Forum - aspose.com because this current forum is dedicated to our cloud services. Same applies for future requests.