Unable to Get Custom Font in WebView in MAUI

Question

Unable to Get Custom Font in WebView in MAUI

Faiz Quraishi 145

I am using Visual Studio 2022 and MAUI 8 API 33

I have WebView and Label inside CollectionView as datatemplate .

Same Data is binded to each control through two properties of Model .

For WebView Fonts are not applied while for Label control Fonts Applied Properly.

ContentPage Xaml File :

<CollectionView.ItemTemplate>

    <DataTemplate>

        <VerticalStackLayout>

            <WebView Grid.Column="0" >

                <WebView.Source>

                    <HtmlWebViewSource Html="{Binding Arabictext1}" />

                </WebView.Source>

            </WebView>

            <Label TextType="Html" FontSize="22" FontFamily="AlQalamnew"  

             Padding="5"  LineHeight="1.5" LineBreakMode="WordWrap" Margin="2"

            Text="{Binding ArabicText2}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"  />
</VerticalStackLayout> 

 </DataTemplate>

</CollectionView.ItemTemplate>


Content For WebView:

Generating below Html and appended text to property

<html>

    <head>

        <style type='text/css' >

                @font-face {font - family: AlQalamnew;

                src: url('/Resources/Fonts/alqalamquranmajeedwebregular.ttf');

                }

            body {

                font-family: 'AlQalamnew';

                font-size: 22px;

                text-align: center;

                color: #333;

            }

        </style>

    </head>

    <body>

        <span  style='font-family:AlQalamnew;font-size: 22px;text-align: center;' ><span style='color:red;'><strong>الل</strong></span>ہ کے نام سے جو رحمان و رحیم ہے<span>

    </body>

    </html>

```Unexpected OutPut

![FontMismatch](/api/attachments/dcf2ffad-f428-4afb-99d2-c1e67d951c5e?platform=QnA)

Accepted answer

0 additional answers

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

Hello,

On the Android platform, if you want to use fonts in a WebView, you need to add an Android asset prefix file:///android_asset/ to the font file.

You could refer to the following example:

<WebView>
<WebView.Source>
<HtmlWebViewSource>
<HtmlWebViewSource.Html>
<![CDATA[
<html>
<head>
<style type="text/css">
            @font-face {
            font-family: MyFont;
            src: url("file:///android_asset/OpenSans-Semibold.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>

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Faiz Quraishi 145

Thanks

I have added related fonts in created Folder Asset Under Platforms=>Andriod

Still same issue and font not applied to WebView.

My HTML string code generation is like this

$@"

        <html>

        <head>

            <style type='text/css' >

                    @font-face {{font - family: AlQalamnew;

                    src: url('file:///android_asset/alqalamquranmajeedwebregular.ttf');

                    }}

                body {{

                    font-family: 'AlQalamnew';

                    font-size: 22px;

                    text-align: center;

                    color: #333;

                }}

            </style>

        </head>

        <body>

            <span style='font-family:AlQalamnew;font-size: 22px;text-align: center;' ><span style='color:red;'><strong>الل</strong></span>ہ کے نام سے جو رحمان و رحیم ہے<span>

        </body>

        </html>";

Un Desired Output is

FontMismatch

Faiz Quraishi 145 Reputation points

2024-09-14T05:29:54.1233333+00:00
Finally assigning this string value to XAML with related property to WebView

<WebView >

<WebView.Source> <HtmlWebViewSource Html="{Binding ArabicText}" /> </WebView.Source>

</WebView>
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-09-16T01:52:26.7866667+00:00

I have added related fonts in created Folder Asset Under Platforms=>Andriod

For the case of adding a font file to a custom folder, you need to right-click on the file, then select Properties, and finally change the Build Action to MauiFont.

After that, the compiler will package the file as an asset inside the application.

Faiz Quraishi 145

I have updated the setting and changed the spelling of font family and extra gaps in between and applied same font to Body tag as well .

Also updated my font face url path to specific to .ttf then its working for me.

@"

        <html>

        <head>

            <style type='text/css' >

                    @font-face {{font-family: AlQalamnew;

                    src: url('alqalamquranmajeedwebregular.ttf');

                    }}

                body {{

                    font-family: 'AlQalamnew';

                    text-align: center;

                    font-size: 22px;

                }}

            </style>

        </head>

        <body style='text-align: center;font-family: AlQalamnew;' >

           <span style='font-family:AlQalamnew;font-size: 22px;text-align: center;' ><span style='color:red;'><strong>الل</strong></span>ہ کے نام سے جو رحمان و رحیم ہے<span>

        </body>

        </html> 

      ";

Desired Output is

WorkingFineFonts

Share via

Unable to Get Custom Font in WebView in MAUI

0 additional answers

Your answer