Fonts

Dory uses the self-hosted Hanken Grotesk, Bricolage Grotesque, and JetBrains Mono fonts from @clidey/ux by default. You can set custom fonts in dory.json using a stylesheet URL or your own font files.

Configuration#

JSON

"fonts": {
  "family": "Inter",
  "source": "https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2",
  "format": "woff2"
}

Field	Description
`family`	The font name (e.g. `"Inter"`, `"Montserrat"`, `"Fira Code"`).
`source`	Direct URL to the font file. See below for how to get this from Google Fonts.
`format`	Font format. Use `"woff2"` for the best browser support.

Getting a Font URL from Google Fonts#

Visit Google Fonts

Go to fonts.google.com and find the font you want.

Select a weight

Click the font, then select the weight you want (e.g. Regular 400). Click Get font → Get embed code.

Copy the font URL

In the embed panel, switch to the CSS tab. Find the line that starts with src: url( and copy the URL inside the parentheses.

For Inter, it looks like this:

Code

https://fonts.gstatic.com/s/inter/v19/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2

Update dory.json

Set family to the font name, source to the URL you copied, and format to "woff2".

Popular Font Configurations#

Default Font#

If no fonts configuration is provided, Dory uses the Clidey Design fonts bundled with @clidey/ux. They load from the built site without a Google Fonts request.

Tip

For a polished look, set a custom font that matches your brand. Google Fonts has hundreds of free options and the setup takes under a minute.

Was this page helpful?

Configuration#

Getting a Font URL from Google Fonts#

Popular Font Configurations#

Inter

Montserrat

Geist (Vercel)

Default Font#