how to load custom fonts in webview in xamarin forms uwp project

Question

Im having problem to load and apply custom fonts in html data loaded into a webview component in a xamarin forms UWP project.Since the fonts doesnt get loaded, the proper font is not applied to the text in the html.

Im creating a xamarin forms application in which i use a webview view to display html data from a book. The data is text from a book and uses some custom fonts like Alvi Nastaleeq to style the text. The fonts are applied in the IOS and Android versions using font-face rule but it doesnt work in UWP. The fonts are in the Assets/Fonts folder in the UWP project.

I have tried using font-face rule in UWP with correct URI-scheme ms-appx-web:// and it doesnt work. I have also gone through the suggestion in the following post: https://blogs.msdn.microsoft.com/wsdevsol/2012/10/23/about-webview-and-fonts/ and doesnt work either

I have tried loading both .woff and .ttf fonts but it doesnt work.

this is what i have in the header of the html:

            // this one was a try for UWP.. not working..
        @font-face {
        font-family: 'Alvi Nastaleeq';
        src: url('ms-appx-web:///Assets/Fonts/Alvi Nastaleeq.ttf');
        } 

             // theese are for IOS and Android and works..
       @font-face { 
        font-family: Alvi Nastaleeq;
        src: url('Fonts/Alvi Nastaleeq.ttf') 
            }
        @font-face { 
        font-family: Aslam;
        src: url('Fonts/Aslam.ttf') 
            }
        @font-face { 
        font-family: Al Qalam Quran Majeed;
        src: url('Fonts/Al Qalam Quran Majeed.ttf') 
            }
        @font-face { 
        font-family: Amiri-Bold;
        src: url('Fonts/Amiri-Bold.ttf') 
            }
   </style>

I want to get the fonts applied to the html data loaded into the webview view in the UWP version of my xamarin forms application.

@NicoZhu-MSFT i have already checked this case and already tried it out, doesnt work, thanks anyways. — Ali Nazar
@NicoZhu-MSFT the html data is in a file which i load into a variable and then pass it onto the webview — Ali Nazar

Mark Zhukovsky Mark Zhukovsky · Accepted Answer · 2019-06-28T13:41:08

This was the only way I was able to get it to work:

Encode your font, you can use Font Squirrel's Webfont Generator. Select Expert... options then under the CSS options tick the box for "Base 64 Encode". Note if you're unhappy with the result (rendering looks poor), try again and under Expert options select "Keep Existing" for the "Truetype Hinting".
Set your @font-face src property equal to the following:

TTF FONTS:

url(data:application/font-ttf;charset=utf-8;base64,YOUR_BASE64_STRING_HEREE) format('truetype');

OPENTYPE FONTS:

url(data:font/opentype;charset=utf-8;base64,YOUR_BASE64_STRING_HERE);

WOFF FONTS:

url(data:application/font-woff;charset=utf-8;base64,YOUR_BASE64_STRING_HERE) format(???woff???);

how to load custom fonts in webview in xamarin forms uwp project

1 Answers