How to Use Your Own Custom Font

To use a custom font, you must ensure the font is loaded on your host website and then reference that exact font name within the Puzzel Chat administration Theming.

Step 1: Prepare your website CSS

Before configuring the font, ensure your font is defined in your website's stylesheet using @font-face. The font-family name you choose here is crucial.

Example CSS on your website:

CSS

@font-face {
    font-family: 'Font-name';
    src: url('path-to-your-font.woff2');
}

Step 2: Define the Font in Theming

1. Navigate to Puzzel Administraton -> Services -> Chat (new) -> "Your configuration name" -> Theming -> Fonts.
2. In the Main Font section, locate the "Font Family" field.
3. Enter the exact name of the font as defined in your CSS (e.g., Font-name).
   • Note: The platform does not host the font files; it simply tells the browser to look for this specific font family on your website.

Step 3: Apply the Theme Font to Elements

Once the global font is defined, you need to tell your specific elements to use it.

1. Open your Interaction (e.g., Panel, Chat, etc.) and select an element (like a Header or Body text).
2. In the Design tab on the right, look for Font family.
3. Select Main Font (theme) from the dropdown menu.
   • This links the element to the global setting you created in Step 2.

Step 4: Save and Test

1. Save your changes and Publish the configuration.
2. Load the page on your host website. The configuration should now inherit the font style directly from your site's CSS.