P11 Blazor UI Library – Bootstrap 5.3 Components

P11FontFamily (font family selector)

The P11FontFamily component provides users with an accessible way to change the global CSS font family of the entire application. It utilizes the injected IThemeService to dynamically update the root CSS variable, ensuring all elements that rely on the theme's default font update instantly.

This component is typically rendered as a dropdown or selection list and is best used with the Two-Way-Binding feature (@bind-Value), which automatically synchronizes the component's internal state with the parent component's string variable containing the CSS font stack.

Application example and live preview

Manual Font Selector (for demonstration)

Current CSS Value: Default (System)

Implementation

<div class="row mb-4 g-4">
    <div class="col-md-6">
        <label for="fontSelect" class="form-label fw-bold">@AppState!.T("Manual Font Selector (for demonstration)")</label>
        <P11FontFamily CssClass="form-select-lg" @bind-Value="_myLocalFontFamilyModel" Fonts="_availableFontFamilies" />
        <div class="form-text">@AppState!.T("Current CSS Value: ") <code>@(_availableFontFamilies.FirstOrDefault(x => x.CssFontFamily == _myLocalFontFamilyModel)!.Font ?? string.Empty)</code></div>
    </div>
</div>

@code {
    // Instance of the model for two-way binding
    private string _myLocalFontFamilyModel = "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'";

    // List of available font families for the P11FontFamily component
    private readonly List<FontFamilyModel> _availableFontFamilies = new()
    {
        new() { Font = "Default (System)", CssFontFamily = "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'" },
        new() { Font = "Arial / Sans-serif", CssFontFamily = "Arial, sans-serif" },
        new() { Font = "Times New Roman / Serif", CssFontFamily = "'Times New Roman', Times, serif" },
        new() { Font = "Courier New / Monospace", CssFontFamily = "'Courier New', Courier, monospace" },
        new() { Font = "Verdana", CssFontFamily = "Verdana, sans-serif" },
        new() { Font = "Georgia", CssFontFamily = "Georgia, serif" }
    };

    /*
        NOTE: To add custom fonts to your Blazor (or MAUI Blazor) application, follow these steps:
        ------------------------------------------------------------------------------------------
        1. Download font (e.g. from Google Fonts)
        2. If the font format is ttf, convert it to WOFF and WOFF2 (preferably using the website https://transfonter.org/).
        3. Save the converted font in the Blazor project (e.g., under wwwroot/fonts/).
        4. Integrate the font into a CSS file via HTML using @font-face (e.g. app.css or fonts.css)
            Examle:
            @font-face {
                font-family: 'OpenDyslexic';
                src: url('/_content/[YOUR-PROJECT]/fonts/Dyslexic/OpenDyslexic.woff2') format('woff2'), url('/_content/[YOUR-PROJECT]/fonts/Dyslexic/OpenDyslexic.woff') format('woff');
                font-weight: 400;
                font-style: normal;
                font-display: swap;
            }
            => Make sure to link the css file in your index.html (MAUI Blazor) or App.razor (Blazor Server) file.
                e.g. : <link rel="stylesheet" href="@Assets["app.css"]" />
        5. Repeat these steps for each additional font you want to integrate into your project.
        6. Set the default font with HTML in CSS using Bootstrap variables.
            Example:
            :root {
                --bs-body-font-family: 'OpenDyslexic', serif !important;
                --bs-headings-font-family: 'OpenDyslexic', serif !important;
            }
        7. Set up the P11FontFamily component.
            Example:
            <P11FontFamily Fonts="@Fonts" />
            @code{
                private readonly List<FontFamilyModel> Fonts = new()
                {
                    new() { Font = "Default (System)", CssFontFamily = "OpenDyslexic" },
                    new() { Font = "Arial / Sans-serif", CssFontFamily = "Arial, sans-serif" },
                    new() { Font = "Times New Roman / Serif", CssFontFamily = "'Times New Roman', Times, serif" },
                    new() { Font = "Courier New / Monospace", CssFontFamily = "'Courier New', Courier, monospace" },
                    new() { Font = "Verdana", CssFontFamily = "Verdana, sans-serif" },
                    new() { Font = "Georgia", CssFontFamily = "Georgia, serif" }
                };
            }
        8. Now the custom fonts should be available in the P11FontFamily component and can be selected by the user at runtime.
        ------------------------------------------------------------------------------------------
     */
}

Component API (P11FontFamily)

Parameter	Type	Default	Description
`Value` / `@bind-Value`	`string`	Required	The Two-Way-Bound string containing the currently selected CSS font family stack (e.g., `'Arial', sans-serif`). This is automatically updated upon selection.
`AvailableFontFamilies`	`List<FontFamilyModel>`	Required	A list of `FontFamilyModel` objects defining the display name and the corresponding CSS font stack available for selection.
`Title`	`string?`	`null`	Optional title or label displayed above the font family selection control.
`CssClass`	`string?`	`null`	Optional CSS class to be applied to the main wrapper `div` of the component for custom styling/layout overrides.
Inherited Parameters
`Id`	`string?`	`null`	The optional unique ID for the component's root element.
`IsDisabled`	`bool`	`false`	When set to `true`, the component will be displayed in a disabled state, preventing user interaction.