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: Custom / Unknown

Implementation

<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" ShowSystemFonts="true" />
    <div class="form-text">@AppState!.T("Current CSS Value: ") 
        <code>
            @(_availableFontFamilies.FirstOrDefault(x => x.CssFontFamily == _myLocalFontFamilyModel)?.Font ?? "Custom / Unknown")
        </code>
    </div>
</div>

@code {
    private string _myLocalFontFamilyModel = FontDefaults.DefaultSystemCss;
    private readonly List<FontFamilyModel> _availableFontFamilies = FontDefaults.GetSystemFonts();

    /*
        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/fonts.css).
        4. Integrate the font into a fonts.css file via HTML using @font-face
            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["fonts.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" }
                };
            }
        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.
`Hide`	`bool`	`false`	If set to `true`, the component is not rendered at all. This allows developers to apply and update font family values programmatically without showing the UI control.
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.