use custom fonts in PDF export of a drawDOM

2 posts, 0 answers
  1. Chi Man
    Chi Man avatar
    9 posts
    Member since:
    Apr 2013

    Posted 17 Feb Link to this post


     I export my PDF using the following functions:

    $(".export-pdf").click(function() {
               // Convert the DOM element to a drawing using kendo.drawing.drawDOM
               var fileName = $(this).data('val');
               kendo.drawing.drawDOM($("#" + $(this).data('val')))
                    .then(function(group) {
                        // Render the result as a PDF file
                        return kendo.drawing.exportPDF(group, {
                            paperSize: "auto",
                            margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                    .done(function(data) {
                        // Save the PDF file
                            dataURI: data,
                            fileName: fileName + ".pdf",
                            //proxyURL: "//"


    according to this document:

     I have defined the font though kendo.pdf.definefont:

    kendo.pdf.defineFont({"Verdana" : "/fonts/Verdana.ttf", // this is a URL"Verdana|Bold" : "/fonts/Verdana_Bold.ttf","Verdana|Bold|Italic" : "/fonts/Verdana_Bold_Italic.ttf","Verdana|Italic" : "/fonts/Verdana_Italic.ttf"});

    However, i am not sure how to tell the drawDOM object to use the font being defined. because in the example:

    var text = new drawing.Text("Hello World", new geo.Point(100, 100));

    text.options.set("font", "30px Verdana");


    drawing.Text have to be filled with particular text but now i need all the text in the DOM drawing with the custome font.

    Thank you.

  2. T. Tsonev
    T. Tsonev avatar
    2760 posts

    Posted 19 Feb Link to this post


    The drawDOM method will read the font names from the computed style of the element.
    Therefore you need to set the element to use Verdana in the document itself:

    .my-content {
          font-family: Verdana, sans-serif;

    I hope this helps.

    T. Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top