Add a custom font to a theme

Level: advanced

note

Theming is available for Enterprise and Unlimited pricing plans. Learn more: Creatio Composable Pricing.

Out of the box, a theme uses Montserrat for both its heading font and its body font. Match them to your brand so that the Creatio interface stays consistent with your other corporate materials.

Add a font from the package files

Either store the font files in the package alongside the theme, or load the font from an external provider, such as Google Fonts. In both cases, import the font in the stylesheet of the theme, then point the font family variables at it. This method changes the font family only, so keep the font size and the line height as they are, because the interface layout relies on the standard type scale.

You must have access to the file system of your Creatio instance. If you lack this access, contact Creatio support.

Store the font files in the package

Keep the font in its own folder next to the theme so that more than one theme can reuse it without duplicating the files:

<package>/
    themes/
        my-theme/
            theme.json
            theme.css
    fonts/
        source-sans-3/
            source-sans-3.css
            SourceSans3-Regular.woff
            SourceSans3-Medium.woff
            SourceSans3-Bold.woff

1. Create a "fonts/<font-name>/" folder in the package, then add the font files together with a stylesheet that declares them.

   Add one @font-face block per weight that the theme uses, and omit the weights the theme leaves unused, because loading every weight of a font adds load time.

   @font-face {
       font-family: 'Source Sans 3';
       src: url('./SourceSans3-Regular.woff') format('woff');
       font-weight: 400;
       font-style: normal;
       font-display: swap;
   }

2. Import the stylesheet in the "theme.css" file, then set the font family variables. Set both variables to use the same font everywhere, or set one variable to keep Montserrat for the other role.

   @import '../../fonts/source-sans-3/source-sans-3.css';
   
   .my-theme {
       --crt-font-family-heading: 'Source Sans 3', sans-serif;
       --crt-font-family-body: 'Source Sans 3', sans-serif;
   }

   Keep the relative path between the "themes/" and "fonts/" folders stable. If the package is moved or restructured, keep both folders in the same relative position to each other.

As a result, Creatio will load the stylesheet of the theme when the theme becomes active, the browser will process the @import, and every typography token that reads --crt-font-family-heading or --crt-font-family-body will use the new font.

Use an externally hosted font

If the font is publicly available, for example, through Google Fonts, import it directly and store no files in the package.

Import the font in the "theme.css" file, then set the font family variables.

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap');

.my-theme {
    --crt-font-family-heading: 'Source Sans 3', sans-serif;
    --crt-font-family-body: 'Source Sans 3', sans-serif;
}

As a result, Creatio will load the font from the provider when the theme becomes active, and every typography token that reads --crt-font-family-heading or --crt-font-family-body will use it.

This method keeps the package smaller and avoids font binaries. The font requires network access to the provider, and the security or privacy policies of some environments can block the request.

---

See also

Theming overview

Create a custom theme

Manage themes