Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

How to use custom font (external font) in WebView as Embedded Resource in Xamarin Forms?

JunedJuned Member ✭✭

Xamarin Forms 4.5 introduced a new way to add Custom font (External font) as an Embedded Resource in our project, so that Font file needs to be added only in the shared project and not in every project such as Android iOS and UWP. Please note that I am using this approach.

Now coming to the question, I want to use Custom Font as an Embedded Resource in a WebView in Xamarin Forms. How to do it. I have done all the prerequisites for it, like Set Build Action - EmbeddedResource, added ExportFont Code as specified here. Also please note that I can use Custom font on a Label and Button in my Page. I just want to use the same Embedded Font in a WebView.

Here is my XAML code:

<WebView x:Name="SampleWebView" HeightRequest="400" />

The Code Behind C#:

private void RenderTextOnWebView()
{
    HtmlWebViewSource htmlSource = new HtmlWebViewSource();
    htmlSource.Html = @"<html>
                        <head>
                            <style>
                                @font-face {
                                    font-family: myFirstFont;
                                    src: url(MyApplication/Fonts/MonotypeCorsiva.ttf);
                                }

                                div {
                                    font-family: myFirstFont;
                                }
                            </style>
                        </head>

                        <body>
                            <h1>The font Example</h1>
                            <div>With CSS, websites can finally use fonts other than the pre selected web - safe fonts.</div>                
                        </body>
                        </html>";

    SampleWebView.Source = htmlSource;
}

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    We need to use ExportFont attribute to indicate the custom font if you want to use embedded resource fonts.
    But we can't make it in the webview. url(...) will only read files on each specific platform and it will fail as you put the font in the shared project.
    So I think we still need to embed font resources on each separate project to make it available in WebView.

  • LuNguyenLuNguyen Member

    I have an extension class for get Embedded file. You can copy it and using.

    public static class Utility
    {
            public static string ToEmbeddedPath(this string path)
            {
                var f = path.DeleteEmbeddedCache();
                using (var resource = Assembly.GetExecutingAssembly().GetManifestResourceStream(path))
                using (var file = new FileStream(f, FileMode.Create, FileAccess.Write))
                {
                    resource.CopyTo(file);
                }
                return "file://localhost/" + f.TrimStart('/');
            }
    
            public static string DeleteEmbeddedCache(this string path)
            {
                var f = Path.Combine(FileSystem.CacheDirectory, path);
                if (File.Exists(f))
                    File.Delete(f);
                return f;
            }
    }
    
Sign In or Register to comment.