DM Serif Display + Switzer
Curated pairing with copy-ready CSS.
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:wght@400;700&display=swap');
:root{\n --font-headings: 'DM Serif Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;\n --font-body: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;\n}\n\nh1,h2,h3{font-family:var(--font-headings);line-height:1.12}\nbody{font-family:var(--font-body);line-height:1.6}
Preview
Typography that feels intentional
Pairings work when one font leads and the other supports. Use spacing and size to reinforce hierarchy, then keep weights minimal for performance.
Try this in Font Preview.
FAQ
How do I use this pairing in CSS?
Import the fonts (or self-host), set a heading stack and a body stack, then assign headings and body text accordingly.
How many weights should I load?
Keep it minimal. For most sites: 400 for body and 700 for headings is enough.