General
MudBlazor's default font is Roboto and is not loaded automatically. The installation instructions include how to load the font. But in general, the fastest and easiest way is to load it from Google Fonts, as in the example below.
h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis teneturbody1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
caption text OVERLINE TEXT<MudText Typo="Typo.h1">h1. Heading</MudText> <MudText Typo="Typo.h2">h2. Heading</MudText> <MudText Typo="Typo.h3">h3. Heading</MudText> <MudText Typo="Typo.h4">h4. Heading</MudText> <MudText Typo="Typo.h5">h5. Heading</MudText> <MudText Typo="Typo.h6">h6. Heading</MudText> <MudText Typo="Typo.subtitle1">subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</MudText> <MudText Typo="Typo.subtitle2">subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</MudText> <MudText Typo="Typo.body1">body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</MudText> <MudText Typo="Typo.body2">body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.</MudText> <MudText Typo="Typo.button">BUTTON TEXT</MudText> <MudText Typo="Typo.caption">caption text</MudText> <MudText Typo="Typo.overline">OVERLINE TEXT</MudText>
Alignment
Left Lorem ipsum dolor sit amet.
Start Lorem ipsum dolor sit amet.
Right Lorem ipsum dolor sit amet.
End Lorem ipsum dolor sit amet.
Center Lorem ipsum dolor sit amet.
Justify Lorem ipsum dolor sit amet.
Inherit Lorem ipsum dolor sit amet.
<MudText Align="Align.Left"><b>Left</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.Start"><b>Start</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.Right"><b>Right</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.End"><b>End</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.Center"><b>Center</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.Justify"><b>Justify</b> Lorem ipsum dolor sit amet.</MudText> <MudText Align="Align.Inherit"><b>Inherit</b> Lorem ipsum dolor sit amet.</MudText>