Typography
This is a member-only chapter. Log in with your Signal Over Noise membership email to continue.
Log in to readModule 3 · Section 5 of 7
Typography
System fonts are fast and look fine. But if you want something more distinctive, Google Fonts or a self-hosted variable font gives you more control.
For thinklikeacoder.org, the book companion site, I used a serif for headings and a clean sans-serif for body text. That typographic contrast does a lot of the design work on its own.
To add a Google Font, add this to your layout’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=Inter:wght@400;600;700&display=swap" rel="stylesheet" />Then reference it in your custom property:
--font-sans: 'Inter', system-ui, sans-serif;