Add custom fonts and styles

On the Styles tab of XM Cloud Components, you can build rules and elements for the various styles and features available in the UI. It's also possible to add your own features as CSS code: for example, you can add any font that is not already available in the UI or custom bullet points, change how links in paragraphs are displayed, and so on.

Adding custom CSS to a rule or an element applies that style to the themes built using the customized rule or element.

Note

The code you enter in the custom CSS editor overrides the styling that is set in the UI, potentially confusing other users of the style library. Therefore, we recommend that you use the UI when available, only use custom CSS to add new features, and do not override the auto-generated code from the editor.

Add a custom font

You can add custom fonts, including Adobe fonts, to your basics styles. You can then use the new fonts to create typography rules for your elements and themes.

To add a custom font to the styles library:

  1. In the Styles builder, in the left pane, click Fonts.

  2. Click Add font library at the top of the page. 

  3. In the Font type field, click Custom CSS.

  4. In the code editor, do one of the following:

    • Paste the CSS code that describes the font within the @font-face {} rule.

    • Alternatively, click Fetch remote CSS file and paste the URL of the CSS file.

  5. Click Save.

Add rule and element styles with custom CSS

To add a new style to a rule or an element style:

  1. In XM Cloud Components, click the Styles tab.

  2. In the left-hand pane, choose the rule or element you want to add custom CSS to, then click the custom CSS tab.

  3. In the code editor, after the generated code, add your own CSS code with new features.

    Note

    The code editor shows the CSS code that has been generated from the features built in the other tabs of the style. This generated code cannot be edited, but you can add to it. The code editor will then validate your code syntax.

  4. When your code is correct and complete, click Save.

A blue dot in the custom CSS tab indicates that the rule or element has customizations.

Example of custom CSS code editor with customization.

Do you have some feedback for us?

If you have suggestions for improving this article,