Discover beautiful Google Font combinations for your next project. Generate heading and body font pairs instantly.
Heading Font: Playfair Display
Body Font: Source Sans Pro
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.
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Source+Sans+Pro&display=swap" rel="stylesheet">
h1, h2, h3 { font-family: 'Playfair Display', serif; }
body, p { font-family: 'Source Sans Pro', sans-serif; }Typography is one of the most important aspects of web design. Finding two fonts that work well together can be challenging. Our Font Pair Generator curates beautiful combinations of Google Fonts to help you start your project with style.
We typically pair a distinct, characterful font for headings with a clean, readable font for body text. This creates visual interest and hierarchy in your design.
<link> tag and paste it into the <head> of your website.The preview above uses the font names. If you don't have these fonts installed locally, your browser may substitute them. However, the code provided will correctly load them from Google Fonts when used on your site.
Color Palette Generator
Build colour palettes from any base colour — 6 harmonies plus a Tailwind-style 11-step scale. Export CSS, Tailwind config, JSON or SVG. Free, no signup.
Open
Logo Maker
Make a clean monogram + wordmark brand logo in your browser. Multiple shapes, fonts, colour presets, export SVG and 2K PNG. Free, no watermark.
Open
SVG Editor
Edit, optimise and recolour SVGs in your browser. Bulk colour swap, viewBox edit, minify/format, export PNG or .svg. Files never upload.
Open