Bravura and SMuFL
alphaTab ships with Bravura, Steinberg's SMuFL reference font, wired up out of the box. Every notehead, clef, accidental, and dynamic in the score is drawn from this font โ and because Bravura covers the full SMuFL glyph range, alphaTab renders correctly without any font configuration on your side.
Why SMuFLโ
SMuFL โ the Standard Music Font Layout โ is the industry specification that maps every music-notation glyph to a fixed Unicode code point in the Private Use Area. Any SMuFL-compliant font can render any SMuFL-compliant score, and every renderer that follows the spec agrees on which glyph sits at which code point.
Bravura is Steinberg's reference implementation of that spec and covers the full glyph range alphaTab needs. Because the layout is standardized, swapping Bravura for another SMuFL font โ Petaluma, Leland, Sebastian โ changes the look of every note, rest, clef, and accidental without changing a line of engraving code.
Since 1.7.0, alphaTab follows SMuFL engraving metrics directly. The font supplies the drawing data and a metadata.json sidecar supplies the spacing, so the same score reflows automatically when you point at a different font.
Show it in codeโ
Bravura loads on its own โ no settings are required. alphaTab resolves the font files from core.fontDirectory, which defaults to a font/ subfolder next to the alphaTab script:
import * as alphaTab from '@coderline/alphatab';
const container = getAlphaTabContainer();
const api = new alphaTab.AlphaTabApi(container, {
core: { file: '/scores/song.gp' },
});
getAlphaTabContainer() is a placeholder for the platform-specific step of obtaining the render target โ a <div> on Web, an AlphaTab control on .NET, or an AlphaTabView on Android. Every other line runs unchanged on all three runtimes.
Override core.fontDirectory if your bundler places the font files somewhere else, or set the global ALPHATAB_FONT before alphaTab loads. For finer control โ a different format, an absolute URL, a custom SMuFL font entirely โ see Using a custom music font.
Where to look nextโ
- Using a custom music font โ swap Bravura for another SMuFL font.
- Custom fonts on Skia โ the .NET / Android equivalent of the
@font-facestep. core.fontDirectoryandcore.smuflFontSourcesreference entries.- Bravura on GitHub โ the source font and license.
- SMuFL specification โ the standard alphaTab implements.