Change font in MAUI Blazor?

Question

I have downloaded the font Comfortaa and saved it in the directory wwwroot/css/open-iconic/font/.

In the file index.html I loaded the font under <style>:

I also specified the alternative font "courier new". As you can see, it seems that the app cannot find my font and therefore uses "courier new".

Checking App with F12 shows that right font is setting:

I have only found one post where the same problem is mentioned:

https://stackoverflow.com/questions/74680546/how-to-change-default-font-in-net-maui-blazor-project#:~:text=Use%20F12%20to%20check%20the,file%2C%20and%20then%20change%20it.

As you can see, I have tried pretty much all the variations, but nothing helps.

By the way, I also specified the font under MauiProgram.cs (although I don't think it has any effect on Blazor).

But if I do the same in the Blazor Server project, it works without any problems (local font is loaded):

Does anyone have an idea what the problem could be with MAUI Blazor and local font?

Thanks

Answer 1

you should use the browser tools to see the font load request. you probably have the wrong url.

Answer 2

Thank you Bruce,

Because I was expecting exactly the answer, I specified the selected folder as well as the accessed one in my post. This makes it easy to check here if my access is correct or not.

So once again:

In the project I have the following folder structure:

In my code I load the font via the following url:

The fact is that font is not loading, but if it is because of my wrong url specification, then I don't see how it should be set correctly for it to work!

Hope someone sees the error (assuming it's not a MAUI / WebView2 problem again)!

I quickly created a project and uploaded it to GitHub:

https://github.com/true-perfect-code/MauiApp1_LocalFont.git

Here too, if you change the alternative font and enter "courir new", for example, you will see that it is loaded.

The customisation for font loading in the Github project is in the index.html file :

Hope someone can find a solution with this!

Thanks

Answer 3

It works now! It was actually due to my incorrect writing. It should have been:

        @font-face {
            font-family: "Comfortaa Light";
            /*src: url("_content/rcl/font/Comfortaa.ttf") format("truetype");*/
            /*src: url("../font/Comfortaa.ttf") format("truetype");*/
            /*src: url("../css/open-iconic/font/fonts/Comfortaa.ttf") format("truetype");*/
            src: url("./css/open-iconic/font/fonts/Comfortaa.ttf") format("truetype");
            /*src: url("Comfortaa.ttf") format("truetype");*/
        }

See also https://stackoverflow.com/questions/75863911/cannot-change-default-font-in-net-maui-blazor