Custom Fonts

You can load locally served web fonts with the font-face mixin as follows:

The first argument is the name of the font family (e.g. 'Helvetica'). The second argument is the path to the font files in the theme folder (prefixed by four double-dots to escape the mixin path), excluding file extension. The third arguments is the font weight (normal, bold, 400, 600, etc). The fourth argument is the style (normal/italic).

The statement must be given in the styles.scss file outside the .mytheme {} block, after @import "mytheme.scss" or in a separate stylesheet imported there.

We recommend placing custom font files under a fonts folder in a theme.

Not all browsers support any single font file format, so the base name is appended with .ttf, .eot, .woff, or .svg suffix for the font file suitable for a user’s browser. It is recommended to provide the font in all four formats to support all browsers.

You can load externally served web fonts such as Google Fonts simply by specifying the loading stylesheet for the UI with the @StyleSheet annotation.

For example, to load the "Cabin Sketch" font from Google Fonts:

After loaded, you can use a custom font, or actually font family, by its name in CSS and otherwise.

If the font family name contains spaces, you need to use single or double quotes around the name.