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

admin2025-03-13 1

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!

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!

Share Improve this question asked Nov 14, 2024 at 14:05 Jhezavell Velono 231 silver badge5 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

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.

转载请注明原文地址:http://www.anycun.com/QandA/1741832620a50546.html