Kendo searches DejaVu Sans font in missing folder

[Ismaelc]

Hope you can assist to solve this issue with PDF export feature,

We are doing a js bundle with grunt that includes kendo.core.min, kendo.pdf.min.js and more js files, when I call the saveAsPdf() method DejaVu Sans is missing (404) and is trying to looking in a missing folder with a dynamic folder (same as js bundle), it is possible to force or define a different folder or path??? 

Thanks in advance!

 

[Stefan]

Hello Ismael,

There are two approaches that specify from where the DejaVu Sans(or other) fonts can be loaded:

1) Using the CSS font-face declarations. This will allow loading the font from the CSS:

http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Custom

2) With the defineFont method of the Kendo UI PDF:

http://docs.telerik.com/kendo-ui/api/javascript/pdf#methods-defineFont

If the issue still occurs, please send a runnable example so I can investigate further and provide a suggestion best suited for it.

Regards,
Stefan
Telerik by Progress

[Ismaelc]

Hi Stefan, thanks for your response, looks like I missing something, let me share my code with you

thank you for your support

 

 

[Stefan]

Hello Ismael,

The provided js code looks good.

Please check if the DejaVu Sans files are loaded correctly from the CDN.

Also, I can suggest trying the approach using the CSS font-face declarations.

In addition, check a similar issue on StackOverflow:

http://stackoverflow.com/questions/31248639/kendoui-cannot-locate-dejavu-fonts-after-publish-to-iis

If additional assistance is needed, please send a fully runnable example so I can investigate it locally. 

Regards,
Stefan
Telerik by Progress

[Ismaelc]

Hello Stefan,

 

Unfortunately the issue persist, I'm using font face declaration on this way on my min css file:

 

@font-face {
    font-family: 'DejaVuSans';
    src: url('../CSS/fonts/DejaVu/DejaVuSans.ttf') format('truetype');
}

@font-face {
    font-family: 'DejaVuSans-Bold';
    src: url('../CSS/fonts/DejaVu/DejaVuSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'DejaVuSans-Oblique';
    src: url('../CSS/fonts/DejaVu/DejaVuSans-Oblique.ttf') format('truetype');
}

and this css:

 

kendo-pdf-document {
    font-family: "DejaVu Sans", "Arial", sans-serif;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}

not sure what I'm missing, but i'm having this error in t

kendo.pdf.min.js:25 Cannot load URL: https://qa3s.myherbalife.com/Account/CSS/bundle/v-20161219.070614/fonts/DejaVu/DejaVuSans-Bold.ttf?v=1.1
d @ kendo.pdf.min.js:25
e.onload @ kendo.pdf.min.js:25
kendo.pdf.min.js:25 Uncaught Error: Cannot load font from https://qa3s.myherbalife.com/Account/CSS/bundle/v-20161219.070614/fonts/DejaVu/DejaVuSans-Bold.ttf?v=1.1
    at kendo.pdf.min.js:25
    at d (kendo.pdf.min.js:25)
    at XMLHttpRequest.e.onload (kendo.pdf.min.js:25)

Any clues what can be my mistake?

Thanks again for your support!

[Stefan]

Hello Ismael,

After inspecting the whole picture,

I can assume that the best option in this scenario will be to use the defineFont method as in the provided example and to apply the font-family rule to the widget ".k-widget", not to the kendo-pdf-document as this will not work in this scenario.

Also, please make sure that the names used in the defineFont method are the same as the ones used in the CSS rule.

Regards,
Stefan
Telerik by Progress