Compressing Fonts for Using in Web

Compress/Deflate @font-face fonts

Came up with a solution:

Use Apache's AddType declaration to add a custom mime type and then use that mime type in the AddOutputFilterByType declaration.

For example, for opentype and truetype fonts:

Addtype font/opentype .otf
Addtype font/truetype .ttf
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css font/opentype font/truetype

Both these declarations require their appropriate modules to be active: mod_mime and mod_deflate. And for best practice, the AddType declaration should be in the mime.conf file, and the AddOutputFilterByType declaration should be in the deflate.conf file. See your particular distribution's help files for enabling and configuring Apache modules.

How to reduce size of fonts

• The FontForge program -
  https://fontforge.github.io/en-US
  With its help, you will need to remove unnecessary glyphs, export the resulting font to OTF.

• Then run the resulting file through -
  https://transfonter.org
  For the web, WOFF is universally suitable, but it is better to mark TTF, WOFF and WOFF2 (all the same, the one needed and determined by the browser itself will be loaded). Download the resulting archive (fonts + CSS) and connect them to the project.

• You can also use https://www.fontsquirrel.com/. This service allows you to extract unnecessary characters from the font to reduce its weight. For example, you can pull out all the Cyrillic characters, or the Latin alphabet, or the punctuation marks, or even if these are large fonts they have a lot of Chinese characters, and so on.

You can additionally compress fonts by manually editing glyphs if they contain a lot of artifacts, unnecessary anchor points, etc. As a rule, there are no such fonts, if they are not self-made, of course.

Webfonts for Asian Typefaces

Almost any font you include is going to push you over your speed specs. Let me suggest an alternative.

1. Set Dotum as your default font.
2. Test if Dotum is installed on the user's system.
3. Optionally test Helvetica and maybe Arial Unicode, as well.
4. Download the Noto font if the user does not have any of these fonts installed.

How to Test

There's no formal API to determine whether or not a font is installed, but a common solution is exemplified here. Basically, you set up a dummy element with a large font (monospace is popular but optional), set up a second dummy element with your desired font (using monospace as a fallback), and then compare the widths of the two to see whether your desired font successfully loaded.

Here's his code, but you can find similar solutions with a bit of searching (many of which don't use canvas, if browser support is a concern):

// Call this function and pass in the name of the font you want to check for availability.
//
function doesFontExist(fontName) {
    // creating our in-memory Canvas element where the magic happens
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    // the text whose final pixel size I want to measure
    var text = "abcdefghijklmnopqrstuvwxyz0123456789";

    // specifying the baseline font
    context.font = "72px monospace";

    // checking the size of the baseline text
    var baselineSize = context.measureText(text).width;

    // specifying the font whose existence we want to check
    context.font = "72px '" + fontName + "', monospace";

    // checking the size of the font we want to check
    var newSize = context.measureText(text).width;

    // removing the Canvas element we created
    delete canvas;

    //
    // If the size of the two text instances is the same, the font does not exist because it is being rendered
    // using the default sans-serif font
    //
    if (newSize == baselineSize) {
        return false;
    } else {
        return true;
    }
}

Download your font if necessary

From there you can simply apply the Noto font if no other font seems to be installed. You can do that easily enough using Javascript or jQuery, but I'm a big fan in general of jss, which allows for fast and easy on-the-fly style modifications.

A Bit about French

Finally, I don't think you'll encounter these same problems if you want to use French text. Latin Extended is ubiquitous, and the Unicode code blocks that include the combining accents used in French are included in a number of fonts. If you are especially concerned, you can include any number of lightweight fonts from Google Fonts or Typekit that include Latin Extended and/or the accent blocks.

---

Related Topics