Fonts Stable

Text in your users' videos can use your brand's fonts, or a whole library of them, without shipping a single font file in your app. Fonts work like media: you say which families to offer and where each one lives, and the SDK fetches a font the first time a text needs it.

Offer fonts

The editor's Font tool opens a panel of fonts, each shown in its own typeface. Give it your list of families:

iOS

dock.fonts = ["sans-serif", "serif", "Brand Sans", "Brand Display", "Pacifico"]

Android

dock.fonts = listOf("sans-serif", "serif", "Brand Sans", "Brand Display", "Pacifico")

React Native

<NitrakitEditor editor={editor} fonts={['sans-serif', 'serif', 'Brand Sans', 'Brand Display', 'Pacifico']} />

Web

editor.setFonts(['sans-serif', 'serif', 'Brand Sans', 'Brand Display', 'Pacifico'])

Without a list, the panel offers the generic families plus any fonts you registered.

Tell the SDK where fonts live

Set a font resolver once, at start-up. The SDK calls it with a family name when text needs a font this device doesn't have: when the user picks it in the panel, or when a project made on another device uses it. Return a TTF or OTF URL (your CDN, a font service) or a local file.

iOS

NitrakitMedia.resolveFont = { family in
    .remote(try await api.fontURL(for: family))
}

Android

NitrakitMedia.resolveFont = { family -> MediaLocation.Remote(api.fontUrl(family)) }

React Native

setFontResolver(async (family) => (await api.fontUrl(family)).url)

Web

const editor = await createEditor({
  resolveFont: async (family) => (await api.fontUrl(family)).url,
})

• While a font downloads, its text shows in the default font, and the panel marks fonts not yet on the device.
• Downloaded fonts are kept: each one downloads once per device, and they're ready at the next launch.
• A project stores only the family name, so it stays small and opens anywhere.

Fonts you already have

A font file your app already has on the device can be registered directly, without a resolver: registerFont(path) on iOS, Android and React Native, or editor.loadFont(font) on the web. Registered fonts render the same in the preview and in exports.

The editor's labels

Set font in the theme to a system font or one you registered.