Font Settings

The Fonts picker inside Branding & Design lets you choose a heading font and a body font for your site. These two choices shape the overall feel of your typography without needing any custom code.

Where to find it

Go to Site Settings in the Club Management Portal.
Open Branding & Design.
In the Design panel, open Fonts.
Choose a Headline Font and a Body Font.
Save.
Review the live site in another tab.

Default fonts

If you haven't changed them, your site uses:

Oswald for headings
Open Sans for body text

Available fonts

The picker offers a curated set of headline fonts and body fonts. Every font in the list has been selected for strong web readability — they render clearly across screen sizes, including mobile, so you don't need to worry about legibility when choosing. Pick the style that fits your club's personality and the fonts will handle the rest.

Your selected headline font is used for all heading styles across the site. Your selected body font is used for paragraphs and most general text.

How the picker works

Each font is shown as a preview card. Click a card to select it — the chosen option is highlighted. You pick headline and body fonts separately.

Choosing a good combination

Let headings and body text feel different. Typography works best when you can tell headings and paragraphs apart at a glance. A bolder or more distinctive headline font paired with a simpler body font creates natural visual hierarchy.

Test with real content. Font choices can feel different once they're on actual pages. Check your selection on pages that include long paragraphs, short callout text, navigation labels, and multi-line headings.

Most clubs only change fonts when setting up the site for the first time or refreshing their brand look. Once you've settled on a combination you're happy with, you won't need to revisit this often.

Using a font not in the picker

If your club needs a specific font that isn't offered in the built-in picker, it's possible to load a custom font using the Advanced settings. This involves adding a font stylesheet link and a small amount of custom CSS to override the default font variables. This is an advanced technique — see Advanced for details and an example.