Preview popular Google Fonts combinations. Copy CSS @import code instantly.
预览流行 Google Fonts 字体组合,实时文字效果,一键复制 CSS 代码。
The quick brown fox
jumps over the lazy dog. 0123456789 中文字体测试
Heading Size标题大小28px
Custom Preview Text
自定义预览文字
CSS CodeCSS 代码
How to Use This Tool使用说明
Browse the preset font combinations, each with a Heading font and a Body font.
Click any preset to apply it and see a live preview with sample text.
The tool loads fonts from Google Fonts in real-time.
Click Copy CSS to get the @import code needed to use the fonts in your project.
Try different combinations to find the perfect typography for your website or design.
浏览预设字体组合,每个组合包含标题字体和正文字体。
点击任意预设即可应用,实时预览示例文本效果。
工具从 Google Fonts 实时加载字体。
点击 Copy CSS 获取项目所需的 @import 代码。
尝试不同组合,为你的网站或设计找到完美的排版方案。
Frequently Asked Questions常见问题
What makes a good font pairing? — A good pairing combines a distinctive heading font with a highly readable body font. Contrast in style (serif + sans-serif) or weight (bold + light) creates visual hierarchy without conflict.
Are these fonts free to use? — Yes. All fonts from Google Fonts are open source and free for both personal and commercial use.
How do I use Google Fonts in my project? — Copy the @import CSS code from this tool and paste it into your stylesheet. Then use the font-family in your CSS rules.