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

kendo ui font problem in export pdf

1 Answer 2096 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
U asked on 09 Aug 2017, 10:12 AM

Hi Teachers

I am using Kendoui in core for reporting for pdf and excel.Report pdf have problem for motherland language not display in export file .pdf.I am add  pdf export code of index.chtml file look like this

<h2>PDF Report Kendo UI Layout Tutorials</h2>

            Use the DejaVu Sans font for display and embedding in the PDF file.
            The standard PDF fonts have no support for Unicode characters.

            The font-face is declared in the Kendo UI stylesheets.
    @@font-face {
        font-family: "MyanmarLanguage";
        src: url("~/Fonts/Zawgyi-One.ttf") format("truetype");    

    .k-grid {
        /*font-family: "DejaVu Sans", "Arial", ''sans-serif'';*/
        font-family: ''MyanmarLanguage'';
    /* Hide the Grid header and pager during export */
    .k-pdf-export .k-grid-toolbar,
    .k-pdf-export .k-pager-wrap {
        display: none;

<div class="box wide">
    <p style="margin-bottom: 1em"><b>Important:</b></p>

    <p style="margin-bottom: 1em">
        This page loads
        <a href="">pako zlib library</a> (pako_deflate.min.js)
        to enable compression in the PDF. This is highly recommended as it improves
        performance and rises the limit on the size of the content that can be exported.

        The Standard PDF fonts do not include Unicode support.

        In order for the output to match what you see in the browser
        you must provide source files for TrueType fonts for embedding.

        Please read the documentation about
        <a href="">custom fonts</a>
        <a href="">drawing</a>.

<script type="x/kendo-template" id="page-template">
    <div class="page-template">
        <div class="header">
            <div style="float: right">Page #: pageNum # of #: totalPages #</div>
            Multi-page grid with automatic page breaking
        <div class="watermark">ပိုင္စိုးသူ</div>
        <div class="footer">
            Page #: pageNum # of #: totalPages #

        .ToolBar(tools => tools.Pdf())
        .Pdf(pdf => pdf
            .Margin("2cm", "1cm", "1cm", "1cm")
            .FileName("Kendo UI Grid Export.pdf")
            .ProxyURL(Url.Action("ExcelSave", "Grid"))
        .Columns(columns =>
            columns.Bound(p => p.Name);
            columns.ForeignKey(p => p.GenreId, (System.Collections.IEnumerable)ViewData["genres"], "Id", "Name").Title("Genre");
            columns.ForeignKey(p => p.RatingId, (System.Collections.IEnumerable)ViewData["ratings"], "Id", "Name").Title("Rating");
            columns.ForeignKey(p => p.ShopLocationId, (System.Collections.IEnumerable)ViewData["location"], "Id", "Location").Title("ShopLocation");
        .HtmlAttributes(new { style = "height: 550px;" })
        .Pageable(pageable => pageable
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("ExcelRead", "Excel"))

    /* Page Template for the exported PDF */
    .page-template {
        /*font-family: "DejaVu Sans", "Arial", sans-serif;*/
        font-family : ''MyanmarLanguage'';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;

        .page-template .header {
            position: absolute;
            top: 30px;
            left: 30px;
            right: 30px;
            border-bottom: 1px solid #888;
            color: #888;

        .page-template .footer {
            position: absolute;
            bottom: 30px;
            left: 30px;
            right: 30px;
            border-top: 1px solid #888;
            text-align: center;
            color: #888;

        .page-template .watermark {         
            font-weight: bold;
            font-size: 400%;
            text-align: center;
            margin-top: 30%;
            color: #ff0000;
            opacity: 0.1;
            transform: rotate(-35deg) scale(1.7, 1.5);

    /* Content styling */
    .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;

Pleas help me and see out put pdf file attached.


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 11 Aug 2017, 06:38 AM

Thank you for the provided information.

After inspecting it, if there is no error with loading the ttf files, the font should be exported as expected.

I can suggest checking the following article on how to use the font packs, the same logic and steps need to be taken if custom ttf is used:

Also, please ensure that all of the requirements listed in the documentation are met:

If the issue still occurs, please provide the ttf files, a text which is using this font and I will make a test example in order to inspect it locally. 

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