Fonts

Custom fonts in Stellar Pages can be added using the “Font Import” field in the styles panel. Imports added here, will be loaded within an inline style tag.

Only @import statements will work.

Example Google Font Configuration

Let’s say we want to add the Google font Sacramento to our document for use on headings.

1. First, select the font you wish to load using the “Get Font” button.
2. Next, use the “Get embed code” and choose the @import option.
3. Then copy only the @import rule and paste it into the custom font field in the theme panel. You dot not need to copy the <style> tags.
4. Lastly, you need to reference the font in your CSS. As seen below.

Font Import:

@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');

Inline Styles:

h1 {
  font-family: "Sacramento", serif;
  font-weight: 400;
  font-style: normal;
}