We have a custom font. How do I add it?

In addition to the library of fonts available in the CMS, Google Fonts can be imported into your site.

Most cloud services that supply custom fonts, like Google Fonts and Adobe Fonts (previously TypeKit), will provide an embed option for you to import your font into external web projects, like your site on raisin.

After generating the embed code from your service, paste the snippet into the Header Code section found in Settings > Advanced Settings, and click Save, like so:

Design Panel

With the new font now added, go to the Design panel and scroll to Custom CSS Panel. This is your stylesheet where you can specify the families and/or styles you'd like to affect.

For example, if you want the Cabin font we've imported above to apply to your Heading 4, add the following:

Validate, save, and you're done! The change will now reflect on the front-end site.

Sample

Here's a quick sample of the classes needed how to change all body text and headers:

/* Fonts */

div[data-role="application"] .base-page p {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

ol, ul {
  font-family: "Space Grotesk", sans-serif;
}

div[data-role="application"] .base-page h1 {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

div[data-role="application"] .base-page h2 {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

div[data-role="application"] .base-page h3 {
 font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

div[data-role="application"] .base-page h4 {
 font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}