How to use font-face in xamarin UWP

Question

I am working on cross platform app. In webview I want to use @font-face. It is working fine on Android but not working on UWP. My font file is in Assets/Fonts folder and in style sheet I am using the below code:

@font-face {
    font-family: 'defont';
    src: url('Assets/Fonts/mher.ttf');
}

In Android I was using this:

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

But when same approach I try in UWP, it is not working. Please anyone has any idea?

UPDATE:

Below is my C# code of using normal WebView. I am getting html content from local html file, replace some placeholders and display new html string to WebView.

var browser = new WebView();
var htmlSource = new HtmlWebViewSource();

var assembly = IntrospectionExtensions.GetTypeInfo(typeof(WebViewPage)).Assembly;
Stream stream = assembly.GetManifestResourceStream("MyApp.Assets.MyTemplate.html");

string templateHtml = "";
using (var reader = new StreamReader(stream))
{
    templateHtml = reader.ReadToEnd();
}

templateHtml = templateHtml.Replace("{pageHeading}", _post.Title);
templateHtml = templateHtml.Replace("{body}", _post.Content);
if (_post.IsFeaturedImageAvailable)
{
    templateHtml = templateHtml.Replace("{imgSrc}", _post.FeaturedImageUrl);
}else
{
    templateHtml = templateHtml.Replace("{imgSrc}", "");
}
templateHtml = templateHtml.Replace("pdfprnt-buttons", "pdfprnt-buttons hide");

htmlSource.Html = templateHtml;
htmlSource.BaseUrl = DependencyService.Get<IBaseUrl>().Get();
browser.Source = htmlSource;
Content = browser;

This link is just telling about styling a html page. Style sheet is already working fine and my html page is getting styles from style sheet. The only problem is that it is not getting @font-face. — Basharat Ullah
Okay then have a look here blendrocks.com/code-blend/2015/01/04/… — FreakyAli
This link is for using custom font in xamarin forms control like label etc. I am already using this font on label and it is working fine. The problem is using in WebView on html page using css @fone-face property. — Basharat Ullah

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2019-01-01T02:46:19

It has special Uri Scheme within UWP. For for getting the font in the Assets folder, you need use ms-appx-web://. Please try the following code.

@font-face {
    font-family: 'defont';
    src: url('ms-appx-web:///Assets/Fonts/mher.ttf');
}

Update

I used HybridWebView that could load local html file directly. Then add the css file in UWP project.

html,body{margin:0;padding:10px}

@font-face {
    font-family: 'MyWebFont';
    src: url('ms-appx-web:///Assets/hello.ttf')
}

body, p, h1, span {
    font-family: 'MyWebFont';
}

This is code sample that you could refer.

How to use font-face in xamarin UWP

1 Answers