Font Stacks Per Language With :lang()
Switches to fonts that cover the script of the page or block language, for example Arabic, Hebrew, Japanese, Chinese, Korean, Thai and Hindi, while keeping your theme font for Latin text.
Opens WPIDE on
Code
:lang(ar), :lang(fa), :lang(ur) {
font-family: "Noto Naskh Arabic", "Geeza Pro", Tahoma, "Segoe UI", sans-serif;
line-height: 1.8;
}
:lang(he) {
font-family: "Noto Sans Hebrew", Arial, "Segoe UI", sans-serif;
}
:lang(ja) {
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
line-break: strict;
}
:lang(zh), :lang(zh-CN) {
font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
:lang(zh-TW), :lang(zh-HK) {
font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
:lang(ko) {
font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
word-break: keep-all;
}
:lang(th) {
font-family: "Noto Sans Thai", Thonburi, Tahoma, sans-serif;
line-height: 1.8;
}
:lang(hi), :lang(mr), :lang(ne) {
font-family: "Noto Sans Devanagari", "Kohinoor Devanagari", Mangal, sans-serif;
}Notes
These use fonts already installed on most devices; swap in web fonts you load if you prefer.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.