DEV Community

Kai's brain dump
Kai's brain dump

Posted on • Originally published at braindumpk.substack.com

A CSS font styling protip for mixed English & Asian language sites

Imagine you have a website that uses both English and Asian languages like Chinese, Japanese, or Korean. You want the English text to appear in a Western-style font and the Asian text in an appropriate Asian font.

To achieve this, you don't need to complicate things by separating the Asian text and writing special CSS rules for it. Instead, you can handle it simply by adding the Asian font as a fallback in your CSS file like this:

.content { font-family: <Western font>, <CJK font>; }
Enter fullscreen mode Exit fullscreen mode

When someone opens your website in their browser, it will first try to display all the text using the primary Western font. However, since Western fonts can't show non-Latin characters, the browser will automatically switch to the fallback Asian font, but only for the Asian text.

Pretty neat!

Top comments (0)