字体搭配生成器

Effective font pairing relies on contrast rather than similarity. A high-contrast pair typically combines a serif typeface for headings with a humanist sans-serif for body text, or a geometric display font with a neutral workhorse. Key metrics include x-height compatibility—both fonts should share a similar cap-height-to-x-height ratio so they feel visually balanced at different sizes. Google Fonts curates pairing recommendations that have been validated across millions of real-world sites.

Google Fonts hosts over 1,500 font families, covering Latin, Cyrillic, Greek, Arabic, Devanagari, Chinese, Japanese, Korean, and many other scripts. Each family may contain multiple weights and styles; some variable fonts expose thousands of intermediate weights through a single file. The library is governed by open licences (primarily SIL Open Font Licence 1.1), making every font free for personal and commercial use.

Load only the weights you will actually use in CSS. Each additional weight adds an HTTP request and network bytes; a 300-weight file typically ranges from 20 KB to 80 KB compressed depending on script coverage. Google Fonts' text= parameter lets you subset a font to specific characters, dramatically reducing payload for display fonts. As a rule, a typical site needs at most two weights (regular + bold) for body text and one display weight for headings.

A font stack is the ordered list of font-family values in CSS, from most preferred to a generic fallback like sans-serif or serif. A robust stack ensures readable text even if a web font fails to load—due to network issues or content blockers—by falling back to a visually similar system font. Modern stacks often include platform-native fonts like -apple-system, BlinkMacSystemFont, and Segoe UI before the generic fallback so that unstyled text still looks polished on macOS, Windows, and Android.

Embedding Google Fonts via the CDN sends visitor IP addresses to Google's servers, which may require disclosure under the EU General Data Protection Regulation. Self-hosting the font files on your own CDN or server eliminates this data transfer entirely. FontFYI's CSS Generator produces a complete @font-face ruleset pointing to locally served .woff2 files, which is the recommended approach for EU-facing sites following a 2022 German court ruling on the topic.