Google Fonts

The easiest way to add a custom font is to use one hosted on Google Fonts.

To use on a site, copy the import code by going to:
Select this style > Embed > @import

and pasting this into the Custom CSS field on Ochre Site Settings

E.g.

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Karla:400,700");

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.

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 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.

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.

Did this answer your question?