A protip about CSS font-family and mixed language sites

Let’s say you have a mixed language website that contains both English and CJK text, and you want to use a Western font for the English text and an Asian font for the CJK text.

There’s no need to wrap your CJK text in a separate container div and write a custom CSS rule to style it. The only thing you need to do is to put the Asian font you want to use as the fallback font in the general font-family rule of your CSS file, like this:

/* CSS */ body { font-family: Helvetica, KaiTi; } /* HTML */ 你好!Hello!
Code language: CSS (css)

When this page is loaded in the browser, it will first attempt to render all the text using the primary font Helvetica, but since non-Latin characters can’t be rendered with Western fonts, the fallback Asian font will then be used, but only for the CJK text.

That’s it!

Leave a Comment

Your email address will not be published. Required fields are marked *