Plugin.VariableFont 1.0.4

Plugin.VariableFont

A .NET MAUI plugin that brings variable font support to your app. Set any OpenType variation axis — weight, width, roundness, optical size, and dozens more — directly from XAML or C# on any supported control, on iOS, macOS, Android and Windows.

Installation

dotnet add package Plugin.VariableFont

Setup

Call .UseVariableFont() in your MauiProgram.cs:

builder
    .UseMauiApp<App>()
    .UseVariableFont()
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("GoogleSansFlex.ttf", "GoogleSansFlex");
        fonts.AddFont("Fraunces.ttf", "Fraunces");
    });

Note: Nothing is altered at runtime unless .UseVariableFont() is called. You can safely reference the vf: namespace in XAML without the plugin being active.

Usage

Add the namespace to your XAML file:

xmlns:vf="clr-namespace:Plugin.VariableFont;assembly=Plugin.VariableFont"

Then apply variation axes to any supported control:

<Label Text="Hello, World!"
       FontFamily="GoogleSansFlex"
       FontSize="48"
       vf:VariableFont.Weight="900"
       vf:VariableFont.Width="25"
       vf:VariableFont.Roundness="100" />

Override font family and size independently from the standard MAUI properties:

<Entry vf:VariableFont.FontFamily="Fraunces"
       vf:VariableFont.FontSize="32"
       vf:VariableFont.Weight="100" />

Apply variations to individual Span elements inside a FormattedString:

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Light "  vf:VariableFont.FontFamily="Fraunces" vf:VariableFont.Weight="100" />
            <Span Text="Bold"    vf:VariableFont.FontFamily="Fraunces" vf:VariableFont.Weight="900" />
        </FormattedString>
    </Label.FormattedText>
</Label>

Customize the Shell navigation bar title (iOS, macCatalyst and Android only):

<Shell vf:VariableFont.FontFamily="GoogleSansFlex"
       vf:VariableFont.FontSize="20"
       vf:VariableFont.Weight="700">
    ...
</Shell>

Note: Shell is not supported on Windows. See Platform Support for details.

Platform Support

Controls

⚠️ macCatalyst — DatePicker / TimePicker: The UIDatePicker and UITimePicker controls on macCatalyst use a fixed-width internal column layout. There is no public .Font API and subview traversal breaks the layout. Custom fonts are not applied on this platform; a one-time warning is emitted to the debug output.

Android: Variable font support requires API level 26 (Android 8.0 Oreo) or higher. On lower API levels the plugin no-ops silently.

Windows: WinUI 3 renders text through DirectWrite, which interpolates a variable font only along the standard wght (Weight), wdth (Width), ital (Italic) and slnt (Slant) axes — plus the FontFamily / FontSize overrides. All other custom axes (Grade, Roundness, Monospace, …) cannot be set through the WinUI text stack and are ignored, with a one-time warning emitted per axis to the debug output. Shell is not supported on Windows — the WinUI 3 NavigationView renders its chrome through a control template that explicitly sets its own font properties, with no public API to override them reliably; a one-time warning is emitted. FontImageSource is not supported on Windows (WinUI rasterizes glyphs through its own pipeline, which exposes no font-axis hook); a one-time warning is emitted.

Available Axes

The plugin exposes all registered OpenType variation axes as attached properties. Each axis is validated at the BindableProperty level — an ArgumentOutOfRangeException is thrown immediately if a value is out of range, making misconfiguration easy to catch during development.

⚠️ EdgeHighlight: Does not function as expected on iOS and macCatalyst due to platform rendering limitations. ⚠️ ExtrusionDepth: Does not function as expected on iOS and macCatalyst due to platform rendering limitations.

Not all axes are available in all fonts. The plugin passes only the axes that the font actually supports — unsupported axes are silently ignored at the platform level.

FontImageSource

Variable font icons work on ImageButton, Image, and Button (as icon):

<ImageButton>
    <ImageButton.Source>
        <FontImageSource FontFamily="MaterialSymbols"
                         Glyph="&#xeadb;"
                         Size="48"
                         Color="White"
                         vf:VariableFont.Weight="700"
                         vf:VariableFont.Fill="True" />
    </ImageButton.Source>
</ImageButton>

Requirements

• .NET 8.0, 9.0 or 10.0 MAUI
• iOS 16.0+
• macCatalyst 16.0+
• Android API 26+ (Android 8.0 Oreo) for variable font rendering
• Windows 10 build 19041+ (Windows App SDK / WinUI 3) — Weight, Width, Italic, Slant only

License

Free to use in personal and commercial projects. Source code is not provided. See the LICENSE file for full terms.