Custom Fonts

Google and Adobe Fonts

The easiest way to add a custom font is to use one hosted on Google Fonts or Adobe Fonts. Google Fonts is free to use, Adobe Fonts requires a paid subscription.

Site Settings > Design

1. Under the sections for Body Font and Heading Font, select Google Font from the font family options

2. Fields for Google Font Link and CSS will appear

3. On Google, follow the embed instructions to copy-and-paste the code for both fields

To use an Adobe Fonts font, use the same fields.

It is also possible to paste the @import version of the font embed code into the Custom Styles CSS section. This enables you to import fonts to use on specific page elements. Note that the import line must go above all other CSS code to work.

Other Fonts

To use a font that you have a web-font file and license for, please host this font on a server you have access to (with file CORS policy set up to allow access across domains).

To use the font on an Ochre site, you will need to write the font-face CSS rules, where the source URL points to the file location on your server. The suggested CSS is normally provided with the font download.

Note: This needs to go at the top of the CSS.

E.g.

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/karla/v13/qkBbXvYC6trAT7RbLtyU5rZPoAU.woff2) format('woff2'),
url(https://fonts.gstatic.com/s/karla/v13/qkBbXvYC6trAT7RbLtyU5rZPoAU.woff) format('woff'),
url(https://fonts.gstatic.com/s/karla/v13/qkBbXvYC6trAT7RbLtyU5rZPoAU.eot) format('opentype');
}

To apply the font to a page element, write a CSS rule.

E.g.

body {
  font-family: 'Karla', sans-serif;
}

In this example the font will be applied to the body element.