This is a migrated thread and some comments may be shown as answers.

Export Grid to PDF: fonts not found

1 Answer 850 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Reasult
Top achievements
Rank 1
Iron
Reasult asked on 14 May 2018, 08:57 AM
I'am trying to export the Grid to PDF but I get http 404 errors because the font files cannot be downloaded.

My css definition looks like:

@font-face{font-family:DejaVu Sans;font-weight:700;src:url(/dist/DejaVuSans-Bold.ttf)}

But the fonts are hosted in this location http://somedomain/subdirectory/dist/DejaVuSans-Bold.ttf but the PDF export is looking at  http://somedomain/dist/DejaVuSans-Bold.ttf so I get 404 errors. He doesn't take into account the subdirectory.

I tried to use the kendo.pdf.defineFont to point to the correct location of the fonts files but the PDF Export doesn't pickup these settings

kendo.pdf.defineFont({
 'FontAwesome': '/subdirectory/dist/icons.ttf',
 'DejaVu Sans': '/subdirectory/dist/DejaVuSans.ttf',
 'DejaVu Sans|Bold': '/subdirectory/dist/DejaVuSans-Bold.ttf',
 'DejaVu Sans|Bold|Italic' : '/subdirectory/dist/DejaVuSans-BoldItalic.ttf',
 'DejaVu Sans|Italic' : '/subdirectory/dist/DejaVuSans-Italic.ttf'
 });

 

The subdirectory is dynamic and set while deploying the application so I cannot change the url in the CSS files in front.

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 15 May 2018, 05:53 AM
Hi,

Thank you for the provided details.

Currently, the PDF export expects the fonts to be placed on a specific path in order to map them correctly:

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

"In order for automatic font discovery to work, your CSS must reside on the same domain as the web page."

At the end of the article there is listed an alternative approach:

https://docs.telerik.com/kendo-ui/framework/drawing/how-to/pack-fonts-for-export

If an MVV solution is used the bundles are also an option:

https://www.telerik.com/forums/font-bundles-and-404-error

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Reasult
Top achievements
Rank 1
Iron
Answers by
Stefan
Telerik team
Share this question
or