开发者工具

字体搭配工具

选择两种Google字体并以标题+正文形式预览，找到完美的排版组合

深受 1 万+ 开发者信赖

Heading Font

36px

Body Font

16px

Dark preview

Playfair Display • 36px

The quick brown fox jumps

Source Sans 3 • 16px

Great typography creates hierarchy and readability. The right font pairing can make your design feel intentional, polished, and professional.

The bold weight of the body font and the italic variant both inherit the font family choice.

CSS

/* Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair%20Display:wght@400;600;700&family=Source%20Sans%203:wght@400;700&display=swap');

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
}

body, p {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

Popular Pairings