2

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.

Rasmond
  • 442
  • 4
  • 15
  • Your style may be overwritten. Use F12 to check the style of the current style file, and then change it. – Jianwei Sun - MSFT Dec 05 '22 at 09:52
  • @JianweiSun-MSFT I don't think it is, since changing the font to Arial or TimesNewRoman within app.css does work. It only doesn't see the custom font – Rasmond Dec 05 '22 at 12:10

1 Answers1

2

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.

Jianwei Sun - MSFT
  • 2,289
  • 1
  • 3
  • 7