How to load a custom TTF font in a WebView in .NET MAUI across multiple platforms (Android, iOS, Windows)?

I'm building a .NET MAUI app that uses a WebView to display HTML content. I want to use a custom TrueType font (.ttf) within the HTML, but I’m having trouble loading it properly across Android, iOS, and Windows (UWP).

I've placed my RedHatTextVariableFont_wght.ttf font file in the Resources/Raw/ folder of my project, and I’m trying to load it inside the WebView using the following CSS:

@font-face {
    font-family: 'RedHatTextVariableFont_wght';
    src: url('file:///android_asset/Resources/FireCodeRequirements/RedHatTextVariableFont_wght.ttf') format('truetype'); /* For Android */
         url('file:///Resources/FireCodeRequirements/RedHatTextVariableFont_wght.ttf') format('truetype'); /* For iOS */
         url('ms-appx-web:///Resources/FireCodeRequirements/RedHatTextVariableFont_wght.ttf') format('truetype'); /* For Windows */
}

body {
    font-family: 'RedHatTextVariableFont_wght';
}

The font is not showing up in the WebView on any platform. Here’s what I’ve tried so far:

Placed the font in the Resources/Raw/ folder.
Set the Build Action to MauiAsset.
Used different src paths for each platform (Android, iOS, Windows) in the @font-face rule.

Despite this, the font is not loading correctly.

Question: What is the correct way to reference and load a custom .ttf font in a WebView for all platforms (Android, iOS, and Windows) in a .NET MAUI app?

Any help would be greatly appreciated!

Solution

On android, the reference symbol should be "" instead of ''.

You can refer to the following code on my side, which works on my side.

            <WebView>
                <WebView.Source>
                    <HtmlWebViewSource>
                        <HtmlWebViewSource.Html>
                            <![CDATA[
<html>
<head>
<style type="text/css">
            @font-face {
            font-family: MyFont;
            src: url("file:///android_asset/Samantha.ttf");
                 

            }
 
            body {
            font-family: MyFont;
            font-size: medium;
            text-align: justify;
            }
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
                ]]>
                        </HtmlWebViewSource.Html>
                    </HtmlWebViewSource>
                </WebView.Source>
            </WebView>

And we need register the font as follows:

public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                    //register the font here
                    fonts.AddFont("Samantha.ttf", "MyFont");
                });

#if DEBUG
            builder.Logging.AddDebug();
#endif

            return builder.Build();
        }
    }

Note:

I put my test font in folder Resources/Fonts my test demo.