Font Pairing Tool
Try heading and body typefaces together before you commit. Pick from Google Fonts or drop in your own OTF, TTF or WOFF file, edit the sample text and copy the CSS when it works.
Heading
Paragraph
This is a heading preview. You can edit the text.
This area is editable. Put your own text if you like.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
This area is editable. Put your own text if you like.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
How to use it
- Pick a heading font and a paragraph font, or press Suggested pair for a combination that works. Random and Swap are there too.
- Set the size, weight and italic for each. Every weight loads for real, so Bold is the true Bold.
- Click the preview text and type your own copy.
- Drop an OTF, TTF, WOFF or WOFF2 file on either side to test your own typeface.
- Copy the CSS. It updates as you change things, and your last pair is remembered.
Questions
Can I test my own fonts?
Yes. Drop an OTF, TTF or WOFF file on the heading or paragraph side. It is loaded in your browser and never uploaded.
Where do the fonts come from?
The list loads fonts from Google Fonts on demand, and the copied CSS includes the matching @import lines.
How are the heading sizes worked out?
Each heading level is four fifths of the size of the one above it, starting from the heading size you set.
Free to use, no account. If it saves you time, support the tools or see every free tool.