Webfonts for Asian Typefaces

Question

I'm writing a simple site, but want to display Asian characters (Korean).

I'm using Google's Noto Fonts, but realized that each one of the .otf files are over 4M. I'm trying to keep my site lean and fast, but noticed that my site takes <100 ms to load, until I add the custom font, which takes over 1.5 seconds.

I'm using very basic styling:

    <style type="text/css">
        @font-face {
            font-family: NotoSans;
            src: url("/assets/fonts/NotoSansKR-Medium.otf") format("opentype");
        }
        pre {
            font-family: NotoSans;
        }
    </style>

I looked into Compressing fonts for using in web, but I really want my site to be back to <100ms again without sacrificing aesthetics.

I thought of using something like Google Web Fonts, but couldn't find anything for Asian typefaces (maybe I'm not looking hard enough?). I also thought of caching, but that would work best with something like a webfont, which I cannot find. I looked on a popular Korean site, naver.com and I think they just use Dotum font (which is pretty good, but assumes the user has Dotum).

CSS from naver:

font-family: "돋움",Dotum,Helvetica,"Apple SD Gothic Neo",Sans-serif;

What is the best practice for providing a good typeface to users that want to read a bit of Korean text? I just want to personally be able to access my site without having to wait a whole 1.6+ seconds before any text shows up.

(I'm also curious what to do about french, but that is another issue)

Answer 1

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.