Workspace includes a curated selection of website fonts that you can apply through Website Styles. If your brand uses a font that is not included, you may be able to load it from an external font service or your own web hosting and apply it with Custom CSS.
Workspace no longer uses traditional website themes. Your shared typography is controlled through Settings → Website Styles, with Custom CSS available for more advanced requirements. We’ll also be introducing styled component libraries and website themes over the coming weeks and months.
Start with the fonts in Website Styles
- Open Settings → Website Styles.
- Review the available font families.
- Choose fonts for your navigation, footer, paragraphs, headings and buttons.
- Select the appropriate sizes, weights and line heights.
- Save Website Styles and review your public website.
This is the simplest and most maintainable way to manage typography. Use a custom font only when your brand requires a family that is not available in Website Styles.
Before adding your own font
Confirm that your font licence permits use on a public website. Owning a desktop font or having it installed on your computer does not necessarily give you a webfont licence.
You will also need a suitable webfont source. Workspace does not currently provide direct font-file uploading through Website Styles. The font therefore needs to be supplied by a reputable webfont service or hosted at an HTTPS address that allows it to be loaded by your website.
For performance, WOFF2 is normally the preferred file format. Load only the font families and weights you actually use.
Add a hosted font with Custom CSS
Open Settings → Custom CSS. A self-hosted font can be declared with an @font-face rule. Replace the example name and URL with the information supplied by your font provider:
@font-face {
font-family: 'My Brand Font';
src: url('https://example.com/fonts/my-brand-font.woff2') format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap;
}
If you use more than one weight or style, add a separate declaration for each file and give it the correct font-weight and font-style.
Some font services provide an @import rule instead. Follow the provider’s current webfont instructions and make sure the service permits use on your domain.
Apply the font
After loading the font, apply it only where needed. Always include fallback fonts so the page remains readable if the custom font cannot load.
h1, h2, h3 {
font-family: 'My Brand Font', Georgia, serif;
}
You can also add a custom CSS class to a Page Designer widget and target that class when the font should be used in only one part of the website.
Check the result carefully
Review the website on desktop and mobile, paying particular attention to:
- Whether the font loads consistently.
- Headings that wrap onto additional lines.
- Navigation labels and buttons.
- Readability at smaller sizes.
- Bold, italic and other weights.
- Page speed and visible font changes while a page loads.
If the fallback font continues to appear, check the font URL, the family name used in your CSS and whether the font host allows the file to load on your domain.
Keep typography restrained
One or two complementary font families are normally enough for a professional website. Use a distinctive font selectively and keep body text easy to read. Consistent sizing, spacing and line height are as important as the font itself.
Maintaining custom fonts
You are responsible for the font licence, external hosting and any Custom CSS used to load the font. If the provider changes its URL, removes the font or changes its service, you may need to update your website. Workspace support can help identify the source of a display problem, but investigation or correction of custom font code may be chargeable. We will let you know before undertaking chargeable work.
