Localizing websites to CJK (Chinese, Japanese, and Korean) languages brings with it a few unique challenges, not the least of which is how to deal with your fonts. Keeping the branding of a site consistent and making everything look good often will mean that you want to use a font that’s not a default on most people’s computers. Which, of course, means turning to a webfont.

That’s not a problem we face writing in English. Since we only have 26+ characters, there is a large selection of default fonts to choose from. And if we don’t find one we like, having a site’s visitor download even a full webfont set doesn’t take very long at all.

But take Japanese. There’s around 2,000 common Japanese characters, and over 50,000 total. Can you imagine having every visitor to your localized website download a 50,000 character font file?

One way we can get around this is by optimizing our fonts using Adobe Typekit.

Typekit is a tool from Adobe that links your website’s code to their font repository. It’s pretty easy to set up, though the free account will only let you use two fonts per kit. But it’s not too pricey for the full account: starts at $50/year or $40/year for business accounts, and this price goes up based on page views.

But even with the free account, there are a number of things you can do to get a stylish, lightweight font. Everything that I’m about to go over is available through the Advanced features, by the way, so just make sure to switch over to that when making your kit.

Asynchronous Loading

By default, the Advanced Typekit code will enable something called Asynchronous Loading. When my team tested this out, it showed a measurable decrease in load times with it enabled. And so that I may serve as further proof that you don’t need to be an advanced coder to use advanced code, I only have a foggy idea on how it works. This quote from Bram Stein, Senior Computer Scientist at Adobe Typekit, describes the process in more detail:

“The default JavaScript embed code will load the JavaScript kit in a render-blocking way. However, once the JavaScript loads, the kit will load the fonts asynchronously. Why wait for the JavaScript to load? You’ll get better performance and the same behavior by switching to the advanced embed code; the advanced embed code will load both the fonts and JavaScript asynchronously.” – Bram Stein, Senior Computer Scientist at Adobe Typekit.

So, there you have it. One thing I do understand about Asynchronous Loading is that by enabling it, by default your site will have a flash of unstyled text (what Adobe calls “FOUT”) while your webfont loads. However, we can control how that looks with Adobe Typekit’s Font Events, which I’ll describe a little further down in this article.

Dynamic Subsetting

When you use a webfont, there are a few different subsets you can use. The default for most fonts includes all the characters required for English, French, German, Italian, Portuguese, and Spanish.

Right away, we can see that won’t work for our CJK fonts, and so you may be tempted to use the All Characters option, just to be safe. Don’t do this. The All Characters includes all the characters in the font files, including all of the supported languages for that font family. That means huge font files. It’s so impractical that Adobe automatically disables the option when trying to use Japanese fonts.

The one that we want is Dynamic Subsetting. With Dynamic Subsetting, the Typekit JavaScript generates a custom subset containing only the characters in use on your website. What this means is that your site’s visitor only downloads the characters that are currently on screen when they visit your site, which will significantly cut down on load times.

As an aside, the Vertical Features checkbox on this screen enables support of vertical text in Japanese fonts, if that’s something you need.

Font Events

Have you ever visited a webpage, and just for a split second see a flash of a different font before the regular font shows? That is an example of poorly managed Font Events that come with Asynchronous Loading. But Typekit offers a way of controlling this.

By using some simple code (which you can copy and paste from here), you control what font your site’s visitors see while your (hopefully quick and lightweight) webfont downloads. More importantly for branding purposes, you can tell the browser to have your loading font be invisible, so your visitors just see a flash of no text at all before your nice, stylized webfont load.

Our resident code wiz, Erika, can explain how to implement this better than I on her post about this project, so give that a read when you’re ready to edit your code.

Should I use Typekit?

If you are wanting to localize your websites for any CJK language — and if you’re not afraid to get just a little bit into the code of your site — Adobe Typekit is a great option. It’s very user-friendly, and there’s a lot of documentation out there on how to make best use of it. Using the paid version gives you a lot more fonts and options, but for a personal blog or small business, the free version has plenty of flexibility.

Credits

Erika Egner

Chelsea Inaba