Home About Me

A Better Cross-Platform Font Stack for WordPress Themes

I used to swap themes whenever I got tired of looking at the old one. A freshly installed theme always felt like a brilliant decision at first. A few days ago, that urge came back again—but this time it wasn’t about visual fatigue. The real problem was that the old theme looked awful on a Mac, especially the text.

After a lot of tinkering, I finally bought a new theme that was pretty decent. Comparing the two, O-Connor still felt better overall in both design and usability. The new one, however, had one clear advantage: its text rendering looked smooth and refined on both Windows and Mac.

Then it hit me yesterday: if the real issue was font rendering, why change the whole theme? Why not just change the fonts?

That train of thought can probably be summarized as being stubbornly single-minded. A common view among bloggers is that constantly changing themes is something beginners do—an immature habit. I’m no expert, but in the interest of appearing more mature, I decided to keep using O-Connor and simply fix its font settings.

The original CSS in body was:

body{font:14px/1.5 arial,SimSun,serif;font-size:0.875rem;background:url(img/bg.png) repeat #666}

I changed it to this:

body{font-family: "Classic Grotesque W01","Hiragino Sans GB","STHeiti","Microsoft YaHei","WenQuanYi Micro Hei",Arial,SimSun,sans-serif;font-size: 14px;font-size: 0.875rem;overflow-x: hidden;background:url(img/bg.png) repeat #666}

The main difference is that the revised version explicitly redefines the font stack.

For Latin characters, the idea was to look first for Helvetica on Mac, then Tahoma on Windows, and fall back to Arial if neither is available. If all of those are missing, the browser or operating system can use its default sans-serif font.

For Chinese characters, the preferred order was 华文细黑 on Mac, then Microsoft YaHei on Windows, then SimSun on Windows, with Heiti used as a Mac fallback. If none of those are present, it again falls back to the system’s default sans-serif.

This kind of declaration takes several practical details into account: the relationship between display names and actual font file names, the need to handle both English and Chinese text properly, the fact that Latin fonts should come before Chinese fonts in the stack, and the differences between operating systems.

Font rendering varies quite a bit across major systems such as Windows, Mac OS, and the Linux family. Under normal circumstances, if the required fonts are installed, this setup means Windows will typically use Tahoma with Microsoft YaHei, while Mac OS will use Helvetica with 华文细黑. Linux is harder to handle cleanly: although WenQuanYi Micro Hei is included here, its rendering quality is not always clearly superior, and Linux distributions vary too much, so in some cases it may actually be better not to specify too aggressively.

After more testing, though, the following font setting turned out to work better overall:

font-family: Helvetica, Tahoma, Arial, Hiragino Sans GB, "冬青黑体", SimSun, "宋体", Heiti, "黑体", sans-serif;

That version proved more reliable in actual use. In the end, there’s still some personal preference involved—different people will like different combinations—but if the goal is to make a WordPress theme look more consistent across platforms, adjusting the font stack can matter far more than changing the theme itself.