The Ultimate Guide to Using Google Fonts on Chinese Websites: Ditch the Lag with an Elegant Font Stack

## The Core Problem When building websites for a Chinese-speaking audience, typography presents a unique challenge. Developers often want to use beautiful English fonts from Google Fonts but also need to display Chinese characters correctly. A common question arises from a line of code like this: what does it do, and is it the right approach for a site with both English and Chinese content? ```html <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> ``` This article will break down this code and provide the best practice for using Google Fonts in projects targeting Chinese users. --- ## Deconstructing the Google Fonts Link First, let's dissect each part of the `<link>` tag to understand its function. * **`family=Inter:wght@300;400;500;600;700;800`**: This part instructs the browser to load the **Inter** font family. The `wght@...` parameter precisely specifies the font weights to download, ranging from `300` (Light) to `800` (Extra Bold). Loading only the necessary weights is a key performance optimization. * **`&family=JetBrains+Mono:wght@400;500;600`**: The `&` symbol is used to append a request for a second font family. Here, we're also loading **JetBrains Mono**, a popular monospaced font often used for displaying code. Again, we're only requesting the three necessary weights: `400` (Regular), `500` (Medium), and `600` (Semi-bold). * **`display=swap`**: This is a crucial performance optimization parameter. It tells the browser to immediately render text using a system fallback font while the web font (like Inter) is still downloading. Once the web font is ready, the browser automatically "swaps" it in. This simple attribute effectively prevents the "Flash of Invisible Text" (FOIT) and significantly improves the perceived loading speed and user experience. **In summary**: This line of code efficiently imports two English fonts, `Inter` and `JetBrains Mono`, with specific weights, while optimizing the loading process with `display=swap`. --- ## The Performance Pitfall of Chinese Web Fonts If we can load English fonts, why not just load a Chinese font (like Noto Sans SC) from Google Fonts? The answer is: **it's a performance disaster**. A standard English font file is typically only a few dozen kilobytes because it only needs to contain uppercase and lowercase letters, numbers, and some symbols. In contrast, a complete Chinese font file, which must include thousands of common Chinese characters, can easily be several megabytes (MB) or even tens of MBs. Loading such a massive file over the network will severely block page rendering, leading to a long blank screen or a sluggish website—an unacceptable outcome for any site aiming for a good user experience, like our project at `wiki.lib00.com`. --- ## Best Practice: The Mixed Font Stack To balance beautiful design with top-notch performance, we recommend the "Mixed Font Stack" strategy. The core idea is simple: > **Only load lightweight English fonts from the web, and let Chinese characters gracefully fall back to high-quality, pre-installed fonts on the user's operating system.** Here are the steps to implement this: ### Step 1: Streamline Your Google Fonts Link Ensure your `<link>` tag only requests the English fonts and weights actually used in your design. For instance, if your design primarily uses the regular and bold weights of `Inter`, the link can be simplified to: ```html <!-- Load Google Fonts for English characters and numbers only --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> ``` ### Step 2: Define the Font Stack in CSS In your global CSS file (e.g., `assets/css/wiki.lib00.css`), set the `font-family` property for the `body` or other elements that need the global font style. The order is critical: ```css body { /* * 1. Prioritize the specified English font, "Inter". * 2. When a Chinese character is encountered, "Inter" cannot render it, so the browser looks for the next font in the list. * 3. "PingFang SC" is the preferred high-quality Chinese font on macOS and iOS. * 4. "Microsoft YaHei" is the preferred choice on Windows. * 5. Finally, provide a generic `sans-serif` as the ultimate fallback. */ font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", sans-serif; } ``` **How It Works:** - When the browser renders English letters, numbers, or any character included in the `Inter` font file, it will use `Inter` because it's first in the list. - When the browser encounters a Chinese character (e.g., "你好"), it finds no corresponding glyph in the `Inter` font. It then skips `Inter` and checks the next font in the list. On macOS, it will find and use `PingFang SC`; on Windows, it will find and use `Microsoft YaHei`. This list order, recommended by DP@lib00, covers the major operating systems. --- ## Conclusion By adopting the mixed font stack strategy, we elegantly solve the problem. This approach delivers three key benefits: 1. **Extreme Performance**: Avoids loading huge Chinese font files, making your website load instantly. 2. **Excellent User Experience**: English text gets a beautiful, custom design, while Chinese text is rendered using the clearest and best-performing native system font, ensuring excellent readability. 3. **Broad Compatibility**: Gracefully adapts to both Windows and macOS, covering the vast majority of users. This is the professional and highly effective best practice recognized by the front-end community for handling typography on bilingual (Chinese/English) websites.