Typography Pairing

Loads fonts from Google FontsDesign Tools#Typography

Preview heading and body font pairings, including Hindi fonts, with your text and copy the CSS.

Choose a pairing

Language
Mood

Build better products faster

Good typography makes text easier to read. A well-matched pair of fonts gives your website, poster or slides a clear and consistent voice, from the first heading to the last line.

Heading: Outfit (sans-serif, 700) · Body: Inter (sans-serif, 400) Loading fonts…

The preview loads only these two fonts from Google Fonts (fonts.googleapis.com).

40 px
17 px
1.6
Sample background
HTML: add to your page's <head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
CSS
h1, h2, h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: 40px; }

body {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
How to use, limits & privacy

About Typography Pairing

Preview a heading font with a body font, using your own text, before you use them on a website, poster or presentation. Choose from 15 Google Fonts pairings, including five for Hindi in the Devanagari script, filter them by mood, and adjust the sizes and line height. Then copy the <link> tag and CSS rules to add the fonts to your site.

How to Use

1

Choose a pairing

Pick English or हिन्दी (Hindi) under Language, narrow the list with Mood if you like, then click a pairing. Its two fonts load from Google Fonts and the preview updates.

2

Try it with your text

Type your own Heading text and Body text, then adjust Heading size, Body size and Line height. Switch Sample background between Light and Dark to see both.

3

Copy the code

Click Copy <link> and paste the tags into your page's <head>, then click Copy CSS and add the rules to your stylesheet.

Privacy & Processing

  • Mode: connected
  • Files Leave Browser: Selected data may be sent to a service or peer
  • Max Input Size: API dependent
  • Account Required: No
  • Data Stored Locally: Nothing is saved. Your text and settings reset when you reload the page.
  • Network Processing: Required for connected features

Previewing a pairing sends a request to fonts.googleapis.com and fonts.gstatic.com to download its two fonts, so Google sees your IP address. The text you type stays in your browser.

Rules & Limitations

  • Needs an internet connection: the fonts come from Google Fonts. Offline, the preview falls back to your device's fonts and says so.
  • Only the two fonts of the pairing you are previewing are downloaded.
  • The <link> asks for weights 400, 600 and 700 where the font has them. DM Serif Display and Tiro Devanagari Hindi have only regular (400), and Lato and Space Mono have no 600.
  • The pairings are a fixed list of 15; you cannot type in other font names.

Top Suggestions

  • Choosing fonts for a new website, blog or portfolio
  • Picking a Hindi heading and body font for a school project, poster or business card
  • Showing a client how headings and text will look in light and dark mode
  • Getting ready-to-paste Google Fonts code for a landing page

Typography Pairing FAQ

What is font pairing?

Font pairing is choosing two fonts that work well together, usually a distinctive font for headings and a very readable one for body text. A common approach is to contrast them, such as a serif heading with a sans-serif body, while keeping a similar mood.

Which fonts are good for Hindi websites?

Mukta, Hind, Noto Sans Devanagari, Baloo 2 and Tiro Devanagari Hindi are free Google Fonts that support Devanagari and English. Choose हिन्दी (Hindi) under Language to preview pairings of them with Hindi sample text.

How do I add Google Fonts to my website?

Click Copy <link> and paste the tags inside your page's <head>, then click Copy CSS and add the rules to your stylesheet. The headings and body text then use the two fonts.

Are Google Fonts free to use commercially?

Yes. Every font in this tool is published on Google Fonts under the SIL Open Font License or a similar open licence, which allows use in commercial websites, apps and print.

Does previewing fonts share my data?

Previewing sends a request to Google's servers (fonts.googleapis.com and fonts.gstatic.com) to download the two fonts, so Google sees your IP address and browser details. Your text stays in your browser and is not sent anywhere.

Related Tools

Design

Color Converter & Palette Generator

Convert colors between HEX, RGB, HSL, HSV, CMYK and OKLCH, and build shade scales and harmonies.

Runs locallyOpen tool
CSS

CSS Gradient Generator

Make linear, radial and conic CSS gradients with draggable stops. Copy CSS or Tailwind, or share a link.

Runs locallyOpen tool
Text

Lorem Ipsum Generator

Placeholder text by paragraphs, sentences, words or list items, in Latin or Hindi, as plain text or HTML.

Runs locallyOpen tool