Change Default font in a WinUI3 application (WebView2)

[BertrandDeSaintBezier]

Hi :)

I'm using Markdig in a WinUI3-type framework to spit out .md files as .html in a WebView2 UIElement. The text comes out in a font that doesn't match well with the rest of the application. I was wondering how you would go about changing the default font (and other properties ?). I'm guessing something to do with ResourceDictionaries ? Unsure how to proceed.

Thanks !

[xoofx]

Markdig only generates a HTML fragment, not a full page, so you should have control over the HTML page (the head+body) and where you insert this fragment and then you can change CSS properties the way you want, as for a regular HTML page.

[BertrandDeSaintBezier]

Wonderful, thanks very much !

I was using this in a WebView2 so I don't know if this is the best way of going about things, but I essentially just concatenated some css styling to the front of the converted markdown :

private async void WebView_Loaded(object sender, RoutedEventArgs args)
{
    var path = Path.Combine(Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location)!, @"Sample.md");
    var text = File.ReadAllText(path);
    var result = Markdown.ToHtml(text);
    var styledResult = String.Concat("<style>\r\n" +
                                        "html * {\r\n" +
                                            "font-size: 16px;\r\n" +
                                            "line-height: 1.625;\r\n" +
                                            "color: #2020131;\r\n" +
                                            "font-family: Nunito, sans-serif;\r\n" +
                                        "}\r\n" +
                                     "</style>", 
                                     result);

    await WebView.EnsureCoreWebView2Async();
    WebView.NavigateToString(styledResult);
}

This ended up working perfectly as a starting point. I'm still fiddling around with things before I settle on the nicest way of doing it.

Hope this helps someone :)