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

AliNazarAliNazar SEMember ✭✭

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.

Sign In or Register to comment.