Utility for packing fonts into inline style declarations. Useful for dealing with CORS restrictions.

Перейти к файлу

Tsvetomir Tsonev 9f08f501ca fix: change package scope to @progress		2022-06-02 18:48:33 +03:00
sample	docs: add sample usage folder	2016-11-01 15:40:34 +02:00
.gitignore	Initial commit	2016-10-31 10:16:21 +02:00
.npmignore	docs: add sample usage folder	2016-11-01 15:40:34 +02:00
CONTRIBUTING.md	docs: update link to CLA	2017-05-29 10:17:34 +03:00
LICENSE	Initial commit	2016-10-31 10:16:21 +02:00
README.md	fix: change package scope to @progress	2022-06-02 18:48:33 +03:00
index.js	chore: add script and readme	2016-10-31 11:00:37 +02:00
package.json	fix: change package scope to @progress	2022-06-02 18:48:33 +03:00

README.md

Pack Fonts as Inline Scripts

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.

Overview
Basic Usage
Sample Page
Pros and Cons
Browser Support

Overview

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.

Basic Usage

To use the module:

Install the package by running npm install -g @progress/kendo-pack-fonts.
Place the .ttf files of your project in a directory.

Add a file named fonts.json that 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 fontFamily value has to be the name you use in CSS for your font-family declarations.

The fontWeight and fontStyle values have to be either "normal", "bold", or "italic".

The src setting is the path to the font file.

Run the kendo-pack-fonts command 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 a fonts.js file.
```
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-face declarations into the page with the document.write setup. Do not attempt to load it with RequireJS or similar tools because it will not work.
```
    <head>
      ...
      <script src="fonts.js"></script>
```

Sample Page

The sample folder contains a page that uses packed DejaVu Sans fonts. It was created by using the steps previously described.

Pros and Cons

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.

Browser Support

The generated bundle works in all browsers that support Blob. It is tested against Internet Explorer 10, Firefox, and Chrome.