Hi,
I'm using the free trial to try the pdfexport of Kendo React (I'm using the export with component). I have problem with the export of accented characters: "é-è-à-ù" is exported as "Ø-Ł-à-ø" into the pdf.
The properties of the pdf indicates that the font used is Helvetica (so if I understand, the result is normal because this font don't support those characters).
I read this page: https://www.telerik.com/kendo-react-ui/components/drawing/pdf-output/embedded-fonts/ and I declare the @font-face for DejaVu (and the font-family). My page display the text with this font, but when I export the page in pdf, the font DejaVu is not used, and the properties of the pdf still indicate the font Helvetica. It's like if the export didn't take in account the font.
I don't know what I'm missing. Anyone can help me?
1 Answer, 1 is accepted
Hello,
I can suggest checking the following forum post where we have attached a runnable with how to attach different fonts:
https://www.telerik.com/forums/pdfexport-german-character
Also, please have in mind that the DejaVu font may not have these specific charters and another font may need to be embedded.
Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Hi,
Thanks for the reply.
I h'ave read the other post, I run the linked code, and it works. I try to load the DejaVu font, and export the characters "é-è-à-ù": the export is correct. The properties of the pdf indicates that the DejaVu font is used (it worked alos with the font CopperplateGothicBoldRegular).
But in my project, it doesn't work, the pdf use the Helvetica font.
I noticed that my React project is packaged by Webpack Encore (and served by Symfony).
The font-face is:
And the font is well used in the browser.
But the url used to load the font is: http://localhost:8080/build/fonts/DejaVuSans.ttf (in the folder "build/fonts"). Could it be a problem?
Thanks
Hello,
Yes, that could be a possible reason for the issue. The font face will try to load the font from `./DejaVuSans.ttf` but if the font is not there it will just revert to the default one. It will not fire a file not found error.
This is why that URL has to match the real path of the font in relation to the CSS file that is loaded in the final build.
Rank 1
Hi,
Thanks. During the detection of the fonts, the font declared was not detected (like it was not in the DOM).
I declare the font-face directly in the index.html, and the export now take the font in account, and the export is ok. :)
Thanks for your help!