Skip to main content

Custom fonts on Skia

Building a .NET desktop app or Android app that uses non-system fonts โ€” a corporate typography brief for titles and lyrics, a language-specific font for East-Asian lyric text, or a hand-lettered wordmark for the score header? The Skia rendering backend that powers alphaTab on those runtimes does not read fonts from the operating system's font store. Every font used around the notation โ€” titles, lyrics, chord names, fingerings โ€” must be registered with Skia explicitly first.

This registration flow is Skia-only. The preview below is a browser render for illustration; the code snippet configures the exact pipeline that runs inside a .NET or Android app.

Environment.registerAlphaSkiaCustomFont(bytes) accepts the raw font file bytes and returns a Font descriptor that identifies the font inside alphaTab. Once registered, reference that font family name from display.resources like any other font.

Show it in codeโ€‹

import * as alphaTab from '@coderline/alphatab';

const fontBytes = await loadFontBytes('/fonts/Roboto-Regular.ttf');
const roboto = alphaTab.Environment.registerAlphaSkiaCustomFont(fontBytes);

const settings = new alphaTab.Settings();
settings.display.resources.titleFont = new alphaTab.model.Font(
  roboto.family,
  32,
  alphaTab.model.FontStyle.Plain,
  alphaTab.model.FontWeight.Bold,
);

const container = getAlphaTabContainer();
const api = new alphaTab.AlphaTabApi(container, settings);

loadFontBytes() and getAlphaTabContainer() are placeholders for the platform-specific pieces. On .NET, read the font with File.ReadAllBytes or from an embedded resource stream. On Android, open it from assets/ via AssetManager and copy into a ByteArray. Every line after registration runs unchanged on both runtimes.

What to registerโ€‹

Register any font used through display.resources:

  • titleFont, subTitleFont, wordsFont, musicFont (only when replacing Bravura on Skia), copyrightFont
  • barNumberFont, fingeringFont, graceFont, effectFont, markerFont
  • tablatureFont, numberedNotationFont, numberedNotationGraceFont
  • directionsFont, chordDiagramFont, stringTuningFont
  • Any font referenced by a Track, Bar, Beat, or Note style override

Register each font once at startup. Repeated registrations of the same bytes are harmless but wasteful.

Web parityโ€‹

On the Web backend, alphaTab reaches into the browser's font store and any @font-face rules on the page. No registration call is needed โ€” the equivalent step is a CSS @font-face declaration served before alphaTab initializes. See Custom text fonts for the web-side equivalent.

Where to look nextโ€‹