PDFexport: Bold ë or é becomes other char in PDF

Forms SharePoint Online
1

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

2

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

3

Thank you, but I get this error:

TypeError: Cannot read property 'defineFont' of undefined

4

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
5

Hello Nikitina,

Can I use Arial for the frontpage only?

Thank you,

Daniël

6

Hello @danieljr,

For instance, you can add a CSS class for the main page and use the Arial font only for that class.