MudBlazor

Typography

Typography controls the text trough out the theme, like font-family, size, and other settings.

How it works

It's possible to change the following typography types in the theme and effects all text accross the library.

  • Default
  • Body1
  • Body2
  • Button
  • H1
  • H2
  • H3
  • H4
  • H5
  • H6
  • Caption
  • Subtitle1
  • Subtitle2

Change Default Font

To change the default font for all available typography change FontFamily for the Default typography.


@code {
    MudTheme MyCustomTheme = new MudTheme()
    {
        Typography = new Typography()
        {
            Default = new Default()
            {
                FontFamily = new[] { "Poppins", "Helvetica", "Arial", "sans-serif" }
            }
        }
    };
}

Typography Settings

Each typography can be configured with five different settings.


@code {
    MudTheme MyCustomTheme = new MudTheme()
    {
        Typography = new Typography()
        {
            H6 = new H6()
            {
                FontFamily = new[] { "Roboto", "Helvetica", "Arial", "sans-serif" },
                FontSize = "1.25rem",
                FontWeight = 500,
                LineHeight = 1.6,
                LetterSpacing = ".0075em"
            }
        }
    };
}

An error has occurred. This application may no longer respond until reloaded. Reload 🗙