How to use the tool
- Pick a style, like Elegant or Bold, or keep All.
- Press Shuffle for a random pair, or step through them with Previous and Next.
- Type your own headline and text. Your words show the pair better than ours.
- Press Copy CSS when you find one you like.
The pairs are the font combinations in Postfjord's design editor. The tool keeps the ones where the second font reads well in a paragraph, so a script or a display face is only ever the heading.
What makes a good pair
- Contrast, not conflict. A bold or serif heading next to a plain sans body is the classic: the heading catches the eye, the body is easy to read.
- Two fonts are enough. Use weights and sizes for the rest: bold for buttons, a smaller size for labels.
- Check the body at 16 pixels. A body font must read well in long text on a phone. A heading font only has to look good big.
- Watch the letters you use. Check accented letters, numbers and prices before you choose.
The CSS
The CSS loads both fonts from Google Fonts with the weights that exist for them, and sets the heading font on h1, h2 and h3 and the body font on the rest. Paste it at the top of your stylesheet. Every font here is free to use under an open license, also for business.
Use it in Postfjord's design editor
In Postfjord, add your heading and body fonts once under Settings, Brand. Every template in the design editor then uses them, and Apply brand puts them on a design you made before. In the Font panel, Text styles has these combinations ready to add to a page. You can also upload a TTF or OTF file of your own.
FAQ
Are the fonts free?
Yes. Every font here comes from Google Fonts under an open license, such as the SIL Open Font License. You can use them in your logo, your website and your posts, also for business.
Why do the fonts take a moment to show?
Each font loads from Google Fonts the first time you see it. After that it shows at once.
Does Google see that I use the tool?
Google Fonts gets a request for each font, with your browser's address, as with any website that uses Google Fonts. Nothing you type is sent to Google or to Postfjord.
Can I use three fonts?
You can, but two are easier to keep tidy. If you need a third, use it only for one thing, like a script word in a heading.
Can I host the fonts myself?
Yes. Download them from Google Fonts and serve them from your own site. Change the import line in the CSS to your own files.