Typography

ChatTypography holds the fonts the SDK applies to chat elements. Create an instance, override the tokens you need, pass it to ChatTheme, and assign it to chatCenterSDK.theme.

Token map

The table shows which token each SDK element renders by default. Changing a token affects all the listed touch points.

Token	Size / Weight	Where it is used in the SDK
message	14 / Regular	Main message bubble text, toast, deleted messages, match text in search results, quote text in the input field (ChatInputQuoteStyle.messageTextStyle)
heading2	16 / Semibold	Message author name, quote author name (QuoteStyle.authorTextStyle)
caption2	10 / Regular	Message send time (timeTextStyle) and its error state
caption	12 / Medium	Message error text, system message date, button text (ButtonStyle, TextButtonStyle), unread counter badge, author and file name in search results
heading1	17 / Semibold	Navigation bar title
subtitle	16 / Regular	Navigation bar subtitle, placeholder subtitles, quote text within the message itself (QuoteStyle.messageTextStyle), quote author above the input field (ChatInputQuoteStyle.messageAuthorTextStyle), survey question subtitle
title	17 / Regular	Placeholder titles, system message titles (for example, Operator joined), survey question, file name and size in a file message
body	15 / Regular	Input field, attachment menu, QuickReply, loader text, PhotoPicker, schedule system message text
bold	15 / Semibold	Text in ProgressViewStyle, OG preview title
footnote	13 / Semibold	URL in the OG preview
largeTitle	28 / Semibold	The SDK does not apply it by default — set it if your app uses custom components on top of ChatComponents

Usage

let fonts = ChatTypography()
fonts.message = .systemFont(ofSize: 14, weight: .regular)
fonts.bold    = .systemFont(ofSize: 15, weight: .semibold)

let theme = ChatTheme(typography: fonts)
chatCenterSDK.theme = theme

The apply { } method (from the Applicable protocol) provides the same configuration as a chain — this is the primary pattern in the demo app:

chatCenterSDK.theme = ChatTheme(
    typography: ChatTypography().apply { fonts in
        fonts.message = .systemFont(ofSize: 14, weight: .regular)
        fonts.bold    = .systemFont(ofSize: 15, weight: .semibold)
    }
)

The companion method ChatTypography.build { } is a synonym of apply for compatibility.

Set the theme before getChat(...)

Otherwise the styles will not apply on the first frame. Changing ChatTypography properties after the theme has been assigned does not trigger a redraw of an already open screen.

A full typography configuration example is in the demo app: MainViewController+Full.swift.

Custom fonts

Step 1. Add the .ttf / .otf file to the Xcode project with Target Membership enabled.

Step 2. Register the font in Info.plist:

<key>UIAppFonts</key>
<array>
    <string>YourFont-Regular.ttf</string>
    <string>YourFont-Bold.ttf</string>
</array>

Step 3. Assign the font with a fallback. UIFont(name:size:) returns nil if the PostScript name is wrong — without ??, the integrator gets a runtime crash:

let fonts = ChatTypography()
fonts.message = UIFont(name: "YourFont-Regular", size: 14)
    ?? .systemFont(ofSize: 14)
fonts.bold = UIFont(name: "YourFont-Bold", size: 15)
    ?? .systemFont(ofSize: 15, weight: .semibold)

Verify the PostScript name

The exact font name is the PostScript name, not the file name. Print the list of registered fonts once at startup:

UIFont.familyNames.forEach { family in
    UIFont.fontNames(forFamilyName: family).forEach { print($0) }
}

System fonts with custom parameters

fonts.message  = .systemFont(ofSize: 16, weight: .regular)
fonts.bold     = .systemFont(ofSize: 16, weight: .bold)
fonts.caption2 = .monospacedDigitSystemFont(ofSize: 10, weight: .regular)

Monospaced digits through monospacedDigitSystemFont prevent the time labels from "jumping" as values change.

What is not configured through typography

Element	How to configure
Link color	Through link / linkLight in colors
Reply quote style	Through QuoteStyle in styles
Italic	Through UIFont.italicSystemFont(ofSize:) or UIFontDescriptor with the .traitItalic trait

Markdown inside a message

The SDK renders the entire bubble text with a single font, ChatMessageStyle.textStyle.font (by default typography.message). Separate typography for Markdown elements (Callout, List, blockquote, and so on) within a single message is not supported by the public API.