Change Default font in a WinUI3 application (WebView2) #612

New Issue

claunia · 2026-01-29T14:41:06Z

claunia commented

2026-01-29 14:41:06 +00:00

Originally created by @BertrandDeSaintBezier on GitHub (Jul 5, 2023).

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 !

Originally created by @BertrandDeSaintBezier on GitHub (Jul 5, 2023). 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 !

claunia added the question label 2026-01-29 14:41:06 +00:00

claunia closed this issue

2026-01-29 14:41:07 +00:00

claunia commented

2026-01-29 14:41:09 +00:00

@xoofx commented on GitHub (Jul 5, 2023):

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.

@xoofx commented on GitHub (Jul 5, 2023): 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.

claunia commented

2026-01-29 14:41:10 +00:00

@BertrandDeSaintBezier commented on GitHub (Jul 6, 2023):

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 :)

@BertrandDeSaintBezier commented on GitHub (Jul 6, 2023): 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 : ```csharp 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 :)

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/markdig#612