New to Kendo UI for jQuery? Start a free 30-day trial

DefineFont

methods

Defines a map with locations for TrueType Font (.ttf) files. It is safe to call this method multiple times.

The exportPDF method will use the font files when embedding them in a PDF document. Since Kendo UI 2014 Q3 SP1, the Kendo UI PDF generator is able to dig CSS @font-face declarations directly from the stylesheets. "Manually" calling the pdf.defineFont()method is no longer necessary. For more information how to embed fonts using CSS at-rules - check this section. This will work only if the style sheet and fonts are loaded from the same domain.

Fonts must be loaded from the same origin or CORS-enabled. The only format supported by the defineFont method is .ttf.

defineFont

Parameters:mapObject

A map for font names, variants and the location of its .ttf file.

The key is the font name. Optional variants are separated with a pipe symbol.
The value is the TrueType Font (.ttf) file URL.

<script>
    // Import DejaVu Sans font for embedding. WebComponentsIcons is the font used for the Kendo font icons only
    kendo.pdf.defineFont({
        "DejaVu Sans"             : "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans.ttf",
        "DejaVu Sans|Bold"        : "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
        "DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
        "DejaVu Sans|Italic"      : "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
        "WebComponentsIcons"      : "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/glyphs/WebComponentsIcons.ttf"
    });
</script>

<script>
    var draw = kendo.drawing;
    var geom = kendo.geometry;

    var text = new draw.Text(
        "Lorem ípsum dolor sit amét, pro éu facilis vulputáte témporibus.",
        [20, 20], {
            font: "14px 'DejaVu Sans', Arial, sans-serif"
        });

    var root = new draw.Group();
    root.append(text);

    draw.exportPDF(root, { paperSize: "A5", landscape: true }).done(function(data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "dejavu.pdf"
        });
    });
</script>