Thе kendo-pack-fonts module packs one or more fonts into JavaScript code. In this way, you can load that code by using a <script> tag.
The packed code works:
- Regardless of the location you store it—this means that you do not need CORS headers.
- Even if the page is loaded to the
file://URL, because you do not need an AJAX request to load the fonts into the Kendo UI PDF library.
To use the module:
-
Install the package by running
npm install -g @progress/kendo-pack-fonts. -
Place the
.ttffiles of your project in a directory. -
Add a file named
fonts.jsonthat has contents similar to the following example.[ { "fontFamily": "DejaVu Sans", "fontWeight": "normal", "fontStyle": "normal", "src": "./DejaVuSans.ttf" },{ "fontFamily": "DejaVu Sans", "fontWeight": "bold", "fontStyle": "normal", "src": "./DejaVuSans-Bold.ttf" },{ "fontFamily": "DejaVu Sans", "fontWeight": "normal", "fontStyle": "italic", "src": "./DejaVuSans-Oblique.ttf" },{ "fontFamily": "DejaVu Sans", "fontWeight": "bold", "fontStyle": "italic", "src": "./DejaVuSans-BoldOblique.ttf" } ]- The
fontFamilyvalue has to be the name you use in CSS for yourfont-familydeclarations. - The
fontWeightandfontStylevalues have to be either"normal","bold", or"italic". - The
srcsetting is the path to the font file.
- The
-
Run the
kendo-pack-fontscommand from the directory. The module bundles the fonts into JavaScript code and dumps it into standard output. In the following example, the code is redirected to afonts.jsfile.cd /path/to/fonts/directory kendo-pack-fonts > fonts.js -
Load the file with a script file to your page. While placing it in the
<head>element is not a requirement, it is strongly recommended. The script injects the@font-facedeclarations into the page with thedocument.writesetup. Do not attempt to load it with RequireJS or similar tools because it will not work.<head> ... <script src="fonts.js"></script>
The sample folder contains a page that uses packed DejaVu Sans fonts. It was created by using the steps previously described.
This approach demonstrates the following advantages and disadvantages:
| Pros | Cons |
|---|---|
| To load all the fonts you want to use in a page, you need a single HTTP request. | The size of the generated file is greater than the sum of the sizes of the binary .ttf files. However, when you serve JavaScript with the gzip compression, you make up for the difference. |
| You do not have domain security restrictions. | Though you might need just one, all fonts are loaded. |
| The fonts are available before your page is rendered—this means that no flickering occurs. | The average time the generated <script> spends to create a binary Blob from BASE64 is 15 milliseconds per font. The process is faster when you use the classic method of loading the .ttf files with plain CSS. |
The generated bundle works in all browsers that support Blob. It is tested against Internet Explorer 10, Firefox, and Chrome.