kendo.drawing.drawDOM question

[Kheng Aik]

Hi,

I am using Font Awesome in my website, and i use kendo.drawing.drawDOM to export the content of browser to save as PDF.

I have no issue when using Font Awesome v6.x, but after upgrade to v7, it throws exception as below:

Uncaught Error: Table loca not found in directory
    at Directory.readTable (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:42392:19)
    at TTFFont.parse (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43552:25)
    at new TTFFont (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43544:18)
    at kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43844:32
    at XMLHttpRequest.<anonymous> (kendo.all.js?v=MqxEUy3L2C5M1NNIrnRwFVhryZ5lhiNwICBm4cSuw5c:43823:21)

$(document).on({
    "click": function (e) {
        e.preventDefault()
        // Embed external fonts into pdf
        kendo.pdf.defineFont({
            "Font Awesome 7 Brands":
                "/fonts/FontAwesome/fa-brands-400.ttf",

            "Font Awesome 7 Free":
                "/fonts/FontAwesome/fa-regular-400.ttf",

            "Font Awesome 7 Solid":
                "/fonts/FontAwesome/fa-solid-900.ttf",

            "DejaVu Sans":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans.ttf",

            "DejaVu Sans|Bold":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",

            "DejaVu Sans|Bold|Italic":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",

            "DejaVu Sans|Italic":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
        })
        kendo.drawing.drawDOM($("#Body"), {
            landscape: false,
            paperSize: "B2",
            margin: "2cm",
            forcePageBreak: ".page-break"
        }).then(function (group) {
            kendo.drawing.pdf.saveAs(group, siteShortName + "-Snap-" + new Date().getTime() + ".pdf")
        })
    }
}, "#Snap")

Do you able to tell what may cause the error? I am using online free font converter to convert woff2 to ttf as v7 no longer provide ttf. v7 is now using css variable.

Thanks.

[Nikolay]

Hello Kheng Aik,

The error "Uncaught Error: Table loca not found in directory" occurs because the TTF files generated from Font Awesome v7 WOFF2 fonts are missing essential internal tables required by the TrueType format. The Kendo UI Drawing API for PDF export relies on valid TTF files with proper Unicode mappings and expects these tables (such as "loca" and "glyf") to be present.

Root Cause

• Font Awesome v7 Format Change: Font Awesome v7 has moved to WOFF2 and CSS variables for web usage and does not distribute official TTF files.
• Conversion Limitation: Online converters from WOFF2 to TTF often do not reconstruct all necessary tables, resulting in invalid or incomplete TTF files that cannot be parsed by the PDF generator.

Solutions and Alternatives

• Use Official TTF Files: PDF export with Kendo UI requires a fully valid TTF font. If you need Font Awesome icons in your PDF, consider using Font Awesome v6.x, which still provides official TTF files.
• SVG Icon Embedding: If you need features from v7, you can embed SVG icons directly in your DOM. The Drawing API supports SVG and will export them correctly to PDF.
• Fallback to Standard Fonts: If a valid TTF is not available, the PDF generator will use standard fonts, which do not include icon glyphs.
• Feature Request: If you require WOFF2 or CSS variable font support for PDF export, you can submit a Feature Request for broader font format support.

Summary

The error is due to missing tables in the converted TTF file. For reliable PDF export with icons, use official TTF files (e.g., from v6.x) or embed SVG icons. If you need assistance with conversion or alternative icon embedding, please provide details about your process.

Regards,
Nikolay
Progress Telerik

[Kheng Aik]

Hi,

Thank you for explanation.

I have resolved using the following method:

1. Download Font Awesome Desktop Free from official website, it contains OTF font type then later can use free online font converter to convert them into TTF.

2. CSS update as following

.fa, .fas, .fa-solid {
    font-weight: bold;
}

:is(.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .fa-classic, .fa)::before {
    content: var(--fa) !important;
}

3. JavaScript update as following

$(document).on({
    "click": function (e) {
        e.preventDefault()
        // Embed external fonts into pdf
        kendo.pdf.defineFont({
            "Font Awesome 7 Brands":
                "/fonts/FontAwesome/fa-brands-400.ttf",

            "Font Awesome 7 Free":
                "/fonts/FontAwesome/fa-regular-400.ttf",

            "Font Awesome 7 Free|Bold":
                "/fonts/FontAwesome/fa-solid-900.ttf",

            "DejaVu Sans":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans.ttf",

            "DejaVu Sans|Bold":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",

            "DejaVu Sans|Bold|Italic":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",

            "DejaVu Sans|Italic":
                "https://cdn.kendostatic.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
        })
        kendo.drawing.drawDOM($("#Body"), {
            landscape: false,
            paperSize: "B2",
            margin: "2cm",
            forcePageBreak: ".page-break"
        }).then(function (group) {
            kendo.drawing.pdf.saveAs(group, "Snap-" + new Date().getTime() + ".pdf")
        })
    }
}, "#Snap")

I have included the required fonts in case anyone ask the same issue.

Thanks.

 

[Nikolay]

Hi Kheng Aik,

Thank you for the update and sharing the solution you came up with. I am glad to hear you managed to move forward with the project. 

As a small gesture I added some Telerik points to your account.

If you allow me I will convert this ticket to a forum thread so others can benefit from it too.

Regards,
Nikolay
Progress Telerik

[Kheng Aik]

Hi,

Sure, I’m happy for you to share it. Would you mind refining the wording a little to make it clearer or more polished before publish? That way, it’ll be easier for others to understand and benefit from it too.

Here is the link for getting font awesome 7 for desktop https://fontawesome.com/download

This is the online font converter that I have used https://cloudconvert.com/otf-to-ttf

Thanks.

 

[Nikolay]

Hi Kheng Aik,

Thank you for allowing me to convert this to a public forum thread.

I think the wording is great and easy to understand.

Regards,

Nikolay