Embed Font Awesome Icons in PDF Files Exported with the Drawing API
Environment
| Product | Progress® Kendo UI® Drawing API |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I embed custom fonts while working with the Kendo UI Drawing API library and exporting content in PDF?
Solution
Custom fonts, including icon fonts such as Font Awesome, must be available for embedding during the PDF export. Otherwise, the generated document will use a standard set of fonts as defined by the PDF Standard. These fonts normally cover only the ASCII range.
The following example demonstrates how to achieve the desired scenario.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css">
<script>
// The font file location must be set explicitly if it's not hosted in the same domain
kendo.pdf.defineFont({
"FontAwesome":
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf"
});
</script>
<div id="grid" />
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr class="k-alt" data-uid="#: uid #">
<td class="photo">
<i class="fa fa-2x">&\#xf164;</i>
<i class="fa fa-thumbs-down fa-2x"></i>
</td>
<td class="details">
<span class="title">Title: #: Title #</span>
</td>
<td class="country">
#: Country #
</td>
<td class="employeeID">
#: EmployeeID #
</td>
</tr>
</script>
<script>
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
fileName: "Kendo UI Grid Export.pdf",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
},
dataSource: {
type: "odata",
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
}
}
},
columns: [
{ title: "Photo", width: 140 },
{ title: "Details", width: 400 },
{ title: "Country" },
{ title: "EmployeeID" }
],
rowTemplate: kendo.template($("#rowTemplate").html()),
scrollable: false
});
</script>