PDFexport: Bold ë or é becomes other char in PDF

Hello,

When i export my form to PDF any BOLD ë, é, ... (from Multi-line edit field with HTML) is an other char in the result PDF. The standard chars gives no problem.

Is this something with the charset? How can I fix this?

Thank you,

Daniël

Hello @danieljr,

Forms export to PDF is handled by Kendo UI draw. Not standard letters symbols are not recognized by Kendo UI draw.

That is why you need to define the font you are using. Please see the example below.

fd.spRendered(function() {
    kendo.pdf.defineFont({
        "DejaVu Sans"             : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
        "DejaVu Sans|Bold"        : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
        "DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
        "DejaVu Sans|Italic"      : "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
        "WebComponentsIcons"      : "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"
    });

});

Please find more information here:

https://docs.telerik.com/kendo-ui/api/javascript/pdf/methods/definefont

Thank you, but I get this error:

TypeError: Cannot read property 'defineFont' of undefined

Found the solution on this page: https://docs.telerik.com/kendo-ui/framework/drawing/pdf-output/embedded-fonts

I only add this to the CSS (not the code)

.k-pdf-export {
font-family: "DejaVu Sans", "Arial", sans-serif;
}

  /*
      Use the DejaVu Sans font for displaying and embedding in the PDF file.
      The standard PDF fonts do not support Unicode characters.
  */
  div {
    font-family: "DejaVu Sans", "Arial", sans-serif;
    font-size: 12px;
  }

  /*
    The example loads the DejaVu Sans from the Kendo UI CDN.
    Other fonts have to be hosted from your application.
    The official site of the Deja Vu Fonts project is
    https://dejavu-fonts.github.io/.
  */
  @font-face {
    font-family: "DejaVu Sans";
    src: url("https://kendo.cdn.telerik.com/2020.1.114/styles/fonts/DejaVu/DejaVuSans.ttf") format("truetype");
  }

  @font-face {
    font-family: "DejaVu Sans";
    font-weight: bold;
    src: url("https://kendo.cdn.telerik.com/2020.1.114/styles/fonts/DejaVu/DejaVuSans-Bold.ttf") format("truetype");
  }

  @font-face {
    font-family: "DejaVu Sans";
    font-style: italic;
    src: url("https://kendo.cdn.telerik.com/2020.1.114/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
  }

  @font-face {
    font-family: "DejaVu Sans";
    font-weight: bold;
    font-style: italic;
    src: url("https://kendo.cdn.telerik.com/2020.1.114/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
  }
1 Like