When converting to WPF, some system fonts (such as Arial Narrow) are not rendered: they are substituted by the default font. #301

Quantick · 2025-02-10T13:42:27Z

The context is:

Converting a SVG to WPF
That SVG needs to display some text using the Arial Narrow system fonts - with the following

<text font-family="'Arial Narrow'" ...>Some text intended to use the Arial Narrow Font</text>

The result is unexpected.
Namely: that text is rendered using the default font, Arial.

The following SVG can be saved and used inside the WpfSvgTestBox sample application.
The browser renders everything as expected. But in the sample application, the labels overlap with the rectangles because they render using the Arial font instead.

I tested several things around the usage of WpfDrawingSettings:

FontFamillyVisitor property does not help: the custom visitor is not even called (an issue by itself).
AddFontFamillyName("Arial Narrow", "Arial Narrow") does not help.
DefaultFontName = "Arial Narrow"is for sure not a solution, but it demonstrates the library can give access to this font, as it renders this very SVG correctly.

Only a code change in the SharpVectors.Rendering.Wpf project allowed me to have something more satisfying.

In the SharpVectors.Renderers.Texts.WpfTextRenderer class, the BuildSystemFonts method should read:

        private static void BuildSystemFonts()
        {
            if (_systemFonts == null)
            {
                _systemFonts = new Dictionary<string, FontFamily>(StringComparer.OrdinalIgnoreCase);
            }
            if (_systemFonts.Count != 0)
            {
                return;
            }

            foreach(var installedFontFamily in new System.Drawing.Text.InstalledFontCollection().Families)
            {
                _systemFonts.Add(installedFontFamily.Name, new FontFamily(installedFontFamily.Name));
            }
        }

This requires the System.Drawing.Common Nuget package to be added to the SharpVectors.Rendering.Wpf project.

Remark: this is the change that brings the 'Arial Narrow' font into the list of considered system fonts. Fonts.SystemFontFamilies does not return it.

Then in the SharpVectors.Converters.FontFamilyVisitor class, the Visit method should begin with:

        public override WpfFontFamilyInfo Visit(string fontName, WpfFontFamilyInfo familyInfo, 
            WpfDrawingContext context)
        {
            if (string.IsNullOrWhiteSpace(fontName))
            {
                return null;
            }

            // If the 'proposed' font family (familyInfo) is
            // a system font with the same name as the requested font name (fontname),
            // have no substitution (return null)
            if (familyInfo.FontFamilyType == WpfFontFamilyType.System
               && string.Equals(fontName, familyInfo.Name, StringComparison.OrdinalIgnoreCase)
               )
            {
                return null;
            }

            ...
        }

This is just a proposal of course, I have no idea if that could cause any regression.

The text was updated successfully, but these errors were encountered:

paulushub · 2025-02-11T14:12:26Z

What is the result you are getting? Display the XAML.
I run it on the machine that I used for SharpVectors development (Windows 10) and it
has not Arial Narrow so Arial/Arial Bold are used.

Quantick · 2025-02-11T14:19:53Z

Hello, I will add a screenshot of the result on my machine, as a response of the issue. To see this "Arial Narrow" in the interface: If I go to "C:\Windows\Fonts", and then I double-click "Arial", I see that "Arial Narrow" in the "Font Family Details". KR

…

________________________________ From: Paul Selormey ***@***.***> Sent: Tuesday, February 11, 2025 3:12 PM To: ElinamLLC/SharpVectors ***@***.***> Cc: Quantick ***@***.***>; Author ***@***.***> Subject: Re: [ElinamLLC/SharpVectors] When converting to WPF, some system fonts (such as Arial Narrow) are not rendered: they are substituted by the default font. (Issue #301) What is the result you are getting? Display the XAML. I run it on the machine that I used for SharpVectors development (Windows 10) and it has not Arial Narrow so Arial/Arial Bold are used. — Reply to this email directly, view it on GitHub<#301 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AH6X7BACPAUPPOPTFLBYPAT2PIAOBAVCNFSM6AAAAABW2TPKI6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJQHE2DGOJZGQ>. You are receiving this because you authored the thread.

Quantick · 2025-02-11T14:24:35Z

I forgot to post a screenshot of the rendering using SharpVectors.
Here it is:

Quantick · 2025-02-11T14:36:09Z

And the xaml output is:

<DrawingGroup xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:svg="http://sharpvectors.codeplex.com/runtime/">
  <DrawingGroup svg:SvgLink.Key="_SvgDrawingLayer">
    <DrawingGroup.ClipGeometry>
      <RectangleGeometry Rect="0,0,215.9,279.399" />
    </DrawingGroup.ClipGeometry>
    <GeometryDrawing svg:SvgObject.UniqueId="b5f77fc9-0043-495b-ae58-13032530f90a">
      <GeometryDrawing.Pen>
        <Pen Brush="#FF000000" Thickness="0.13" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" />
      </GeometryDrawing.Pen>
      <GeometryDrawing.Geometry>
        <PathGeometry FillRule="EvenOdd" Figures="M2.08,120.314L2.08,120.314 175.57,120.314 175.57,272.817 2.08,272.817 2.08,120.314z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing svg:SvgObject.UniqueId="29464e5b-4c05-4351-b2ce-785d289f6a20">
      <GeometryDrawing.Pen>
        <Pen Brush="#FF000000" Thickness="0.13" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" />
      </GeometryDrawing.Pen>
      <GeometryDrawing.Geometry>
        <PathGeometry FillRule="EvenOdd" Figures="M2.531,120.725L2.531,120.725 175.08,120.725 175.08,126.783 2.531,126.783 2.531,120.725z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <DrawingGroup svg:SvgObject.UniqueId="a1ba5f3e-9df5-4cb8-b3b6-723f6c5ac1ae" svg:SvgObject.Type="Text">
      <GlyphRunDrawing ForegroundBrush="#FF000000">
        <GlyphRunDrawing.GlyphRun>
          <GlyphRun PixelsPerDip="1.25" BaselineOrigin="3.746,125.212" FontRenderingEmSize="4.149" BidiLevel="0" IsSideways="False" ClusterMap="0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17" Characters="Simplified Sample " GlyphIndices="54 76 80 83 79 76 73 76 72 71 3 54 68 80 83 79 72 3" AdvanceWidths="2.76805 1.1537 3.68935 2.5315 1.1537 1.1537 1.38195 1.1537 2.3074 2.5315 1.1537 2.76805 2.3074 3.68935 2.5315 1.1537 2.3074 1.1537" GlyphOffsets="0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0" Language="en-us">
            <GlyphRun.GlyphTypeface>
              <GlyphTypeface FontUri="{svg:SvgFontUri c:/windows/fonts/arialbd.ttf}" StyleSimulations="None" />
            </GlyphRun.GlyphTypeface>
          </GlyphRun>
        </GlyphRunDrawing.GlyphRun>
      </GlyphRunDrawing>
      <GlyphRunDrawing ForegroundBrush="#FF000000">
        <GlyphRunDrawing.GlyphRun>
          <GlyphRun PixelsPerDip="1.25" BaselineOrigin="40.6326666666667,125.212" FontRenderingEmSize="4.149" BidiLevel="0" IsSideways="False" Characters="-" GlyphIndices="16" AdvanceWidths="1.38195" Language="en-us">
            <GlyphRun.GlyphTypeface>
              <GlyphTypeface FontUri="{svg:SvgFontUri c:/windows/fonts/arialbd.ttf}" StyleSimulations="None" />
            </GlyphRun.GlyphTypeface>
          </GlyphRun>
        </GlyphRunDrawing.GlyphRun>
      </GlyphRunDrawing>
      <GlyphRunDrawing ForegroundBrush="#FF000000">
        <GlyphRunDrawing.GlyphRun>
          <GlyphRun PixelsPerDip="1.25" BaselineOrigin="42.0126666666667,125.212" FontRenderingEmSize="4.149" BidiLevel="0" IsSideways="False" ClusterMap="0" Characters=" " GlyphIndices="3" AdvanceWidths="1.1537" GlyphOffsets="0,0" Language="en-us">
            <GlyphRun.GlyphTypeface>
              <GlyphTypeface FontUri="{svg:SvgFontUri c:/windows/fonts/arialbd.ttf}" StyleSimulations="None" />
            </GlyphRun.GlyphTypeface>
          </GlyphRun>
        </GlyphRunDrawing.GlyphRun>
      </GlyphRunDrawing>
      <GlyphRunDrawing ForegroundBrush="#FF000000">
        <GlyphRunDrawing.GlyphRun>
          <GlyphRun PixelsPerDip="1.25" BaselineOrigin="43.166,125.212" FontRenderingEmSize="4.149" BidiLevel="0" IsSideways="False" ClusterMap="0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41" Characters="labels should not overlap with rectangles!" GlyphIndices="79 68 69 72 79 86 3 86 75 82 88 79 71 3 81 82 87 3 82 89 72 85 79 68 83 3 90 76 87 75 3 85 72 70 87 68 81 74 79 72 86 4" AdvanceWidths="1.1537 2.3074 2.5315 2.3074 1.1537 2.3074 1.1537 2.3074 2.5315 2.5315 2.5315 1.1537 2.5315 1.1537 2.5315 2.5315 1.38195 1.1537 2.5315 2.3074 2.3074 1.61435 1.1537 2.3074 2.5315 1.1537 3.2287 1.1537 1.38195 2.5315 1.1537 1.61435 2.3074 2.3074 1.38195 2.3074 2.5315 2.5315 1.1537 2.3074 2.3074 1.38195" GlyphOffsets="0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0" Language="en-us">
            <GlyphRun.GlyphTypeface>
              <GlyphTypeface FontUri="{svg:SvgFontUri c:/windows/fonts/arialbd.ttf}" StyleSimulations="None" />
            </GlyphRun.GlyphTypeface>
          </GlyphRun>
        </GlyphRunDrawing.GlyphRun>
      </GlyphRunDrawing>
    </DrawingGroup>
    <DrawingGroup svg:SvgObject.UniqueId="4f9dc084-47e1-4cfd-bd6c-71cb61d2ca60" svg:SvgObject.Type="Text">
      <GlyphRunDrawing ForegroundBrush="#FF000000">
        <GlyphRunDrawing.GlyphRun>
          <GlyphRun PixelsPerDip="1.25" BaselineOrigin="64.131,247.536" FontRenderingEmSize="4.149" BidiLevel="0" IsSideways="False" ClusterMap="0 1 2 3 4 5 6 7 8 9 10 11 12 13 14" Characters="1: Arial Narrow" GlyphIndices="20 29 3 36 85 76 68 79 3 49 68 85 85 82 90" AdvanceWidths="2.3074 1.1537 0.9213 2.76805 1.38195 0.9213 2.3074 0.9213 1.1537 2.9963 2.3074 1.38195 1.38195 2.3074 2.9963" GlyphOffsets="0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0" Language="en-us">
            <GlyphRun.GlyphTypeface>
              <GlyphTypeface FontUri="{svg:SvgFontUri c:/windows/fonts/arial.ttf}" StyleSimulations="None" />
            </GlyphRun.GlyphTypeface>
          </GlyphRun>
        </GlyphRunDrawing.GlyphRun>
      </GlyphRunDrawing>
    </DrawingGroup>
    <DrawingGroup svg:SvgObject.UniqueId="e3ac911d-b13c-45d1-b88f-95c4128b4fcb" svg:SvgObject.Type="Text">
      <GlyphRunDrawing ForegroundBrush="#FF000000">
        <GlyphRunDrawing.GlyphRun>
          <GlyphRun PixelsPerDip="1.25" BaselineOrigin="64.131,253.175" FontRenderingEmSize="4.149" BidiLevel="0" IsSideways="False" ClusterMap="0 1 2 3 4 5 6 7 8 9 10 11 12 13 14" Characters="2: Arial Narrow" GlyphIndices="21 29 3 36 85 76 68 79 3 49 68 85 85 82 90" AdvanceWidths="2.3074 1.1537 0.9213 2.76805 1.38195 0.9213 2.3074 0.9213 1.1537 2.9963 2.3074 1.38195 1.38195 2.3074 2.9963" GlyphOffsets="0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0" Language="en-us">
            <GlyphRun.GlyphTypeface>
              <GlyphTypeface FontUri="{svg:SvgFontUri c:/windows/fonts/arial.ttf}" StyleSimulations="None" />
            </GlyphRun.GlyphTypeface>
          </GlyphRun>
        </GlyphRunDrawing.GlyphRun>
      </GlyphRunDrawing>
    </DrawingGroup>
    <GeometryDrawing svg:SvgObject.UniqueId="33c59065-e190-45f8-a39f-32de784205ba">
      <GeometryDrawing.Pen>
        <Pen Brush="#FF000000" Thickness="0.13" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" />
      </GeometryDrawing.Pen>
      <GeometryDrawing.Geometry>
        <PathGeometry FillRule="EvenOdd" Figures="M110.158,243.399L110.158,243.399 110.158,248.828 128.736,248.828 128.736,243.399 110.158,243.399z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing svg:SvgObject.UniqueId="bbe809b4-9155-45bc-931e-734877743cfe">
      <GeometryDrawing.Pen>
        <Pen Brush="#FF000000" Thickness="0.13" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" />
      </GeometryDrawing.Pen>
      <GeometryDrawing.Geometry>
        <PathGeometry FillRule="EvenOdd" Figures="M89.156,243.399L89.156,243.399 89.156,248.828 107.733,248.828 107.733,243.399 89.156,243.399z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing svg:SvgObject.UniqueId="5e23a289-7ef9-4371-b2fd-aebf359e5a04">
      <GeometryDrawing.Pen>
        <Pen Brush="#FF000000" Thickness="0.13" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" />
      </GeometryDrawing.Pen>
      <GeometryDrawing.Geometry>
        <PathGeometry FillRule="EvenOdd" Figures="M110.158,249.667L110.158,249.667 110.158,255.096 128.736,255.096 128.736,249.667 110.158,249.667z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <GeometryDrawing svg:SvgObject.UniqueId="f31795e3-55d8-4ed4-8d9b-cfbd0929a04f">
      <GeometryDrawing.Pen>
        <Pen Brush="#FF000000" Thickness="0.13" StartLineCap="Flat" EndLineCap="Flat" LineJoin="Miter" />
      </GeometryDrawing.Pen>
      <GeometryDrawing.Geometry>
        <PathGeometry FillRule="EvenOdd" Figures="M89.156,249.667L89.156,249.667 89.156,255.096 107.733,255.096 107.733,249.667 89.156,249.667z" />
      </GeometryDrawing.Geometry>
    </GeometryDrawing>
    <DrawingGroup svg:SvgObject.UniqueId="d51a7288-7bbd-4d59-b21c-df76284295ad" svg:SvgObject.Type="Text">
      <GlyphRunDrawing ForegroundBrush="#FF000000">
        <GlyphRunDrawing.GlyphRun>
          <GlyphRun PixelsPerDip="1.25" BaselineOrigin="130.627,247.663" FontRenderingEmSize="4.149" BidiLevel="0" IsSideways="False" ClusterMap="0 1 2 3" Characters="Unit" GlyphIndices="56 81 76 87" AdvanceWidths="2.9963 2.3074 0.9213 1.1537" GlyphOffsets="0,0 0,0 0,0 0,0" Language="en-us">
            <GlyphRun.GlyphTypeface>
              <GlyphTypeface FontUri="{svg:SvgFontUri c:/windows/fonts/arial.ttf}" StyleSimulations="None" />
            </GlyphRun.GlyphTypeface>
          </GlyphRun>
        </GlyphRunDrawing.GlyphRun>
      </GlyphRunDrawing>
    </DrawingGroup>
    <DrawingGroup svg:SvgObject.UniqueId="3883f8e9-4085-4d5a-8362-4284ce6252a5" svg:SvgObject.Type="Text">
      <GlyphRunDrawing ForegroundBrush="#FF000000">
        <GlyphRunDrawing.GlyphRun>
          <GlyphRun PixelsPerDip="1.25" BaselineOrigin="130.572,253.627" FontRenderingEmSize="4.149" BidiLevel="0" IsSideways="False" ClusterMap="0 1 2 3" Characters="Unit" GlyphIndices="56 81 76 87" AdvanceWidths="2.9963 2.3074 0.9213 1.1537" GlyphOffsets="0,0 0,0 0,0 0,0" Language="en-us">
            <GlyphRun.GlyphTypeface>
              <GlyphTypeface FontUri="{svg:SvgFontUri c:/windows/fonts/arial.ttf}" StyleSimulations="None" />
            </GlyphRun.GlyphTypeface>
          </GlyphRun>
        </GlyphRunDrawing.GlyphRun>
      </GlyphRunDrawing>
    </DrawingGroup>
  </DrawingGroup>
</DrawingGroup>

Quantick · 2025-02-11T15:56:31Z

I am now back home and I have more information - as my main machine here is still Win10.
Everything I stated above deals with Win11!

Situation:

On Win10, in Edge, the SVG appears with labels overlapping with the rectangles (see scfreenshot below) - and inside C:\Windows\Fonts\Arial, I don't have any "Arial Narrow" entry.
And with an App based on SharpVectors, the same overlapping occurs.

On every Win11 I have access to, in Edge, the SVG appears as I expect - that is without overlapping - and inside C:\Windows\Fonts\Arial, I see that "Arial Narrow" entry.
Nevertheless, withj an app based on SharpVectors, the overlapping occurs.
If I apply the code changes I describe above, the WPF-converted SVG appears without the overlapping.

Win11 rendering of the SVG in Edge:

paulushub · 2025-02-11T16:39:46Z

Even on system where Arial Narrow is listed in the Arial, WPF's Fonts.SystemFontFamilies does not include it, but new FontFamily("Arial Narrow") still works. I do not know if it is because it is not OpenType.

Thanks for the additional information. I will investigate the best way to resolve this issue.
My weekends are busy these days, but I will see what to do this weekend.

Quantick · 2025-02-11T16:49:54Z

Indeed, Fonts.SystemFontFamilies does not include "Arial Narrow". Even when it is actually accessible to Edge, for example.

On the other side, my own little investigations show new System.Drawing.Text.InstalledFontCollection().Families does, in the same situation (beware: a FontFamily class also, but in a different namespace!).

Quantick · 2025-04-08T11:35:30Z

Hi Paulushub,

Any news on this?

paulushub · 2025-04-11T15:03:16Z

Sorry for the delay, my old developer environment is down. It is a Windows 10, that will not be upgraded but
the CPU started malfunctioning.
I bought an other old but Windows 11 PC to transfer the disks, but still could not get Windows to recognize
the bootable disk! I hope to resolve this soon to get back into the old environment, where I developed the
SharpVectors. Again, sorry for the delay.

paulushub self-assigned this Feb 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

When converting to WPF, some system fonts (such as Arial Narrow) are not rendered: they are substituted by the default font. #301

When converting to WPF, some system fonts (such as Arial Narrow) are not rendered: they are substituted by the default font. #301

Quantick commented Feb 10, 2025

paulushub commented Feb 11, 2025

Quantick commented Feb 11, 2025 via email

Quantick commented Feb 11, 2025

Quantick commented Feb 11, 2025

Quantick commented Feb 11, 2025

paulushub commented Feb 11, 2025

Quantick commented Feb 11, 2025

Quantick commented Apr 8, 2025

paulushub commented Apr 11, 2025

When converting to WPF, some system fonts (such as Arial Narrow) are not rendered: they are substituted by the default font. #301

When converting to WPF, some system fonts (such as Arial Narrow) are not rendered: they are substituted by the default font. #301

Comments

Quantick commented Feb 10, 2025

paulushub commented Feb 11, 2025

Quantick commented Feb 11, 2025 via email

Quantick commented Feb 11, 2025

Quantick commented Feb 11, 2025

Quantick commented Feb 11, 2025

paulushub commented Feb 11, 2025

Quantick commented Feb 11, 2025

Quantick commented Apr 8, 2025

paulushub commented Apr 11, 2025