Using your own fonts

ClickWhale offers six fonts that every device already has. Anything beyond those comes from Google Fonts, which you add once to your website and then pick from the font list like any other.

The page lists what you've added, with its name and the address it's loaded from.

An external font is a request to Google. Every visitor's browser fetches the font file from Google's servers before your text can be drawn in it. It happens for every visitor regardless of what they chose in the cookie bar, so mention it in your privacy statement. If you'd rather it didn't happen at all, stay with the six built-in fonts.

The fonts you already have

These need no downloading and no setup, and they render identically on every device:

Arial · Verdana · Helvetica · Times New Roman · Georgia · Courier New

If one of them is close enough to what you want, take it.

Adding a font

1. Go to Manage → Design → External fonts.
2. Click Add external font. The full Google Fonts catalogue loads into a dialog. This takes a moment.
3. Pick a family from the Select font list. The sample paragraph below redraws in it. Read the sample before you decide.
4. Tick the variants you need. regular is ticked for you.
5. Save.

The address is put together for you. There's no URL to copy from anywhere. The font then appears by name in the Font dropdown of any text setting, both on an element and in a display set.

Which variants to tick

A variant is one weight or style of the family: 300, regular, 700, italic, and so on. Each one you tick is a separate file every visitor downloads.

• Tick regular plus the weights you'll actually use, usually one bold, sometimes one light.
• Don't tick everything. A family with fifteen variants ticked is several hundred kilobytes of font before a single word appears.
• If you set text to bold in a weight you didn't tick, the browser fakes it by smearing the regular weight. It looks like a slightly wrong version of your font.

Using it

Font is a text setting, so it lives in the same two places as everything else about text:

• On a display set: under Manage → Design → Elements, on the typography set or the set for whichever element you're styling. This is the one you want for headings and body text: set the font once and the whole website follows. See Display sets.
• On a single element: in the Display settings pane, under Text. Use this for the one quote or the one caption that should stand apart.

Switch the Font setting on, then choose from the list. Your added fonts sit below the six built-in ones.

Removing a font

The delete button in the Options column removes it immediately, with no check on whether it's still being used anywhere.

Nothing breaks. Text that referred to the font falls back to whatever the browser picks, which will be plain and probably not what you want. So if a font has been in use for a while, change the display sets that used it first, and delete it after.

Common issues