Adding Custom Fonts to the WPF HTML Editor Font Dropdown

Adelina builds internal tools at a Bucharest publishing house. Her team produces a glossy lifestyle magazine and a handful of cookbooks, and the brand bible is strict: every printed body paragraph has to be set in their licensed serif, Larken; every heading is set in Larken Display; every pull-quote and recipe card uses a third weight called Cardinal Fruit. The brand designer was very clear that no editor should ever offer Calibri or Times New Roman as the path of least resistance.

The new WPF authoring app routes article drafts through the WpfHtmlEditor. Out of the box, the font dropdown lists every TrueType font installed on the editor's PC. The branded fonts aren't installed on every machine - they ride along with the application as .otf files referenced through CSS web-font URLs. Adelina needs them in the dropdown anyway, and she needs Calibri and the other system distractions gone.

Reading the source, Adelina finds that the font combo is populated from System.Drawing.FontFamily.Families when the editor's template applies. She also finds that the combo itself is reachable through editor.ToolbarItemOverrider.ToolbarItems.FontName. There is no dedicated "AddFont" API - the combo is just a standard WPF ComboBox she can reshape directly.

Her plan has two steps: clear the dropdown of every system font, then add her three. She does it on the editor's Loaded event, which fires after the combo has been populated.

private void ArticleEditor_OnLoaded(object sender, RoutedEventArgs e)
{
    ComboBox fontCombo = ArticleEditor.ToolbarItemOverrider.ToolbarItems.FontName;

    fontCombo.Items.Clear();
    fontCombo.Items.Add("Larken");
    fontCombo.Items.Add("Larken Display");
    fontCombo.Items.Add("Cardinal Fruit");
}

The dropdown now shows only her three names. When a writer selects Larken, the editor calls FormattingService.ChangeFontName("Larken") internally, which writes font-family: Larken into the document's inline style.

That handles the writer-facing dropdown. But the editor still needs to actually render the branded font visually inside the WYSIWYG surface - otherwise her writers see a fallback serif and assume something is broken. Adelina pairs the dropdown change with an @font-face rule pushed into the document's header.

ArticleEditor.HeaderStyleContent = ""
    + "@font-face { font-family: 'Larken'; "
    +              "src: url('https://cdn.publisher.example/fonts/Larken.otf'); }"
    + "@font-face { font-family: 'Larken Display'; "
    +              "src: url('https://cdn.publisher.example/fonts/LarkenDisplay.otf'); }"
    + "@font-face { font-family: 'Cardinal Fruit'; "
    +              "src: url('https://cdn.publisher.example/fonts/CardinalFruit.otf'); }";

If she had only wanted to add the branded fonts on top of the system list (rather than replacing it), she would have skipped the Items.Clear() call and just appended her three names. Either approach works.

A few weeks in, the brand designer adds a fourth display weight for the autumn cookbook. Adelina adds one line to her ArticleEditor_OnLoaded handler and one extra @font-face entry. Her writers see the new family in their dropdown the next time the app launches.

• The font combo is the standard WPF ComboBox reachable via ToolbarItemOverrider.ToolbarItems.FontName.
• Add strings to fontCombo.Items (or Clear() first to replace the list entirely).
• Pair non-system fonts with an @font-face rule pushed through editor.HeaderStyleContent so the editor renders them.