Search code examples
css.netfontsblazormaui

How to change default font in .NET MAUI Blazor project?

I have a default Visual Studio project for .NET MAUI Blazor app (building for Windows x64). I've tried 2 different ways of changing the font.

  1. In MauiProgram.cs there is a configuration of fonts ConfigureFonts. I've added a new font Montserrat-Regular.ttf to the Resources/Fonts directory and registered my font there. Using this font with its new alias didn't work though.

  2. Following these instructions I've added the same file to wwwroot/css and this to wwwroot/css/app.css

@font-face {
    font-family: Montserrat;
    src: url('Montserrat-Regular.ttf') format('truetype');
}

html, body {
    font-family: Montserrat;
}

It doesn't work either. Even though changing font-family to a basic font like Arial or Times-New-Roman does in fact work.

Solution

  • I created a project and tested the code you provided. You should add your own .ttf file to wwwroot/css/open-iconic/font/fonts directory. Just like this:

    @font-face {
    font-family: `LaBelleAurore-Regular`;
    src: url('../css/open-iconic/font/fonts/LaBelleAurore-Regular.ttf') format('truetype');
}

html, body {
    font-family: LaBelleAurore-Regular;
}

    If you want to put .ttf file in another folder, remember to change url('....') to the correct path.