You want to create a seamless experience for your users, making it appear as though your embedded agents are an integral part of your product. With fonts customization, you can use the same font as your product for the embedded agents. Here’s a guide to using specific fonts for an embedded agent, along with the various possible parameters.

Using Google fonts

Below is a sample embedded agent using the Merriweather font from Google fonts.

If you want to use a Google font, simply pass the fontFamily parameter with the Google font name to the customFontTheme attribute of the mindset.init() method, as follows:

const myCustomFontTheme = {
    fontFamily: 'Merriweather'
}

mindset.init({
    fetchAuthentication: getAuthToken, 
    appUid: "YOUR-APP-UID",
    customFontTheme: myCustomFontTheme,
});

Please read the full list of Google fonts and limitations about the number of fonts supported. For this current release, we are using version 6.2.1 of the Google Fonts library, and we will upgrade as necessary in future releases.

Using custom fonts

You can use self-hosted fonts to customize your agent. If you want to use a custom font, you should host it so it can be accessed, and then obtain the URL and checksum of the font. Please skip to the ‘Hosting Custom Fonts’ section for more information on hosting fonts. If you want to use a custom font, you need to add a few more parameters describing the font:

const myCustomFontTheme = {
    fontFamily: 'Firago',
    fontDetails: [
        {
            fontWeight: 600,
            sha256Checksum: '0dda9d907ec201586736814689a387a36fd05ebb87ac6faebdf4f8e4299d3020',
            fontUrl: 'https://raw.githubusercontent.com/bBoxType/FiraGO/master/Fonts/FiraGO_TTF_1001/Italic/FiraGO-SemiBoldItalic.ttf',
            fileSize: 813732,
            fontStyle: 'italic',
        },
        {
            fontWeight: 700,
            sha256Checksum: '51ad0da400568385e038ccb962a692f145dfbd9071d7fe5cb0903fd2a8912ccd',
            fontUrl: 'https://raw.githubusercontent.com/bBoxType/FiraGO/master/Fonts/FiraGO_TTF_1001/Italic/FiraGO-BoldItalic.ttf',
            fileSize: 813028,
            fontStyle: 'italic',
        },
        {
            fontWeight: 500,
            sha256Checksum: '949698ddae3a568f1ada6eed12d5226d448b0b4a6600a44f096cfd9a1aabb555',
            fontUrl: 'https://raw.githubusercontent.com/bBoxType/FiraGO/master/Fonts/FiraGO_TTF_1001/Italic/FiraGO-MediumItalic.ttf',
            fileSize: 813936,
            fontStyle: 'italic',
        }
    ]
}

mindset.init({
    fetchAuthentication: getAuthToken, 
    appUid: "YOUR-APP-UID",
    customFontTheme: myCustomFontTheme,
});

Parameter	Description
`fontWeight`	The weight of the font, e.g. `600` for semi-bold.
`sha256Checksum`	The SHA-256 checksum of the font file is used to verify its integrity. (linux command : `shasum -a 256 "$filename" cut -d' ' -f1`)
`fontUrl`	The URL where the font file is hosted.
`fileSize`	The size of the font file in bytes. (linux command : `wc -c < "$filename" tr -d ' '`)
`fontStyle`	The style of the font, e.g. `italic`.

It is better to provide various fontWeight of your custom font, but if one fontWeight is missing, the agent UI will use the closest existing fontWeight.

When applying a custom font, ensure that it includes all required characters, including special symbols, punctuation, and multilingual character sets, if applicable.

Customizing the font style of the agent UI elements

Whether you use a Google font or a custom font, you can customize the font style of the agent UI elements by using the textStyles attribute in the customFontTheme object. For example, let’s say we would like to change the Thread title font size of the agent UI, we can override it this way:

const customFontTheme = {
    fontFamily: 'Courgette',
    textStyles: {
        titleSmall: {
            fontSize: 50
        }
    }
}

You need to give the values you want to override.In our previous example, we only changed the titleSmall font size to 50. Other values of the type scale (titleSmall) will be kept as the default values. And all others, like displayLarge, headlineMedium, etc., will be retained as the default values.

Overriding default font styles

The agent UI uses a set of textStyles parameters to define font styles like size, weight, and line height. Those textStyles parameters are called type scale tokens.

The Google Material3 type scale tokens documentation is available here.

By default, the agent applies a predefined set of values. If you need to align the agent’s typography with your app’s brand or design system, you can override any of these values directly in your configuration. Below are the default values for the textStyles parameters used in the agent UI. If you need to customize a value, you can override it with your value.

const myCustomFontTheme = {
    fontFamily: 'Courgette',
    textStyles: {
        displayLarge: {
            fontSize: 95,
            fontWeight: 400,
            letterSpacing: -1.25,
        },
        displayMedium: {
            fontSize: 59,
            fontWeight: 400,
            letterSpacing: -1,
        },
        displaySmall: {
            fontSize: 34,
            fontWeight: 400,
            letterSpacing: -0.25,
        },
        headlineMedium: {
            fontSize: 30,
            fontWeight: 400,
            letterSpacing: 0,
        },
        headlineSmall: {
            fontSize: 24,
            fontWeight: 500,
            letterSpacing: 0.2,
        },
        titleLarge: {
            fontSize: 20,
            fontWeight: 500,
            letterSpacing: 0.15,
            height: 1.25,
        },
        titleMedium: {
            fontSize: 18,
            fontWeight: 500,
            letterSpacing: 0.15,
            height: 1.3,
        },
        titleSmall: {
            fontSize: 16,
            fontWeight: 500,
            letterSpacing: 0.15,
            height: 1.35,
        },
        bodyLarge: {
            fontSize: 18,
            fontWeight: 400,
            letterSpacing: 0.15,
        },
        bodyMedium: {
            fontSize: 16,
            fontWeight: 400,
            letterSpacing: 0.15,
            height: 1.35,
        },
        bodySmall: {
            fontSize: 14,
            fontWeight: 400,
            letterSpacing: 0.5,
        },
        labelLarge: {
            fontSize: 16,
            fontWeight: 500,
            letterSpacing: 0.5,
        },
        labelMedium: {
            fontSize: 14,
            fontWeight: 500,
            letterSpacing: 0.3,
            height: 1.4,
        },
        labelSmall: {
            fontSize: 12,
            fontWeight: 400,
            letterSpacing: 0.5,
        },
    }

}

Applied Typography Tokens

The agent UI uses a subset of Material type tokens. These define text styles for key agent UI elements.

Category	Parameters	Description
Title	`titleLarge` `titleMedium` `titleSmall`	These tokens are used for key titles and headings, including: Dialog headers. Section titles in carousels, prompts, and reference lists. Metadata labels like source and segment titles. Zero state messages.
Body	`bodyMedium` `bodySmall`	These tokens are used for general content and supporting text across the Agent UI, including: List items, thread titles, and section headers. Descriptive and metadata text (e.g., agent details, segment summaries, speaker names). Buttons, pills, and labels. Supporting UI text like follow-up questions, video names, and citations.
Label	`labelLarge` `labelMedium` `labelSmall`	These tokens are used for short-form, utility, or supportive text, including: Labels and descriptions in content lists (e.g., sources, key moments, citations). Feedback form instructions and optional field hints.

Hosting custom fonts

If you’d like to host a custom font, here’s a quick guide and some options you should consider.

GitHub / GitHub Pages

You can host font files in a public GitHub repository or use GitHub Pages. Please note that while GitHub is more reliable than Google Drive, it still has rate limits and is not ideal for high-traffic apps. Example URL: https://raw.githubusercontent.com/username/repo/branch/path-to/font.ttf

Firebase Storage

Upload your fonts to Firebase Storage and set them to be publicly readable. Then, generate a direct download link from the Firebase Console.

Amazon S3 or other cloud storage (Azure Blob, Google Cloud Storage)

Cloud storage services are Ideal for production. You can set up a public bucket and serve font files from a CDN. Example URL: https://your-bucket.s3.amazonaws.com/fonts/YourFont.ttf

Your backend or CDN

If you host your server or use services like Netlify, Vercel, Cloudflare Pages, or DigitalOcean Spaces. You can store fonts and serve them directly via a publicly accessible URL.

Overview

Integrate Agent Chat SDK 3

Agent Chat SDK 3: Client-side Integration APIs

Data channels

Integrate Agent Chat SDK 2

MCP Server Integration

Agent Builder SDK Integration

API Overview

API playground

Webhooks

Agent fonts customization

Using Google fonts

Using custom fonts

Customizing the font style of the agent UI elements

Overriding default font styles

Applied Typography Tokens

Hosting custom fonts

​Using Google fonts

​Using custom fonts

​Customizing the font style of the agent UI elements

​Overriding default font styles

​Applied Typography Tokens

​Hosting custom fonts

Using Google fonts

Using custom fonts

Customizing the font style of the agent UI elements

Overriding default font styles

Applied Typography Tokens

Hosting custom fonts