Editing an SVG Font in .NET Maui Blazor Dynamically

[aidangig]

My team and I are trying to change the font of an SVG image that we are retrieving through a URL. For example, our code in the Razor file in our .NET Maui Blazor app is as follows:

<img src="@IconURL" width="150" height="150" />

IconURL is a URL of an SVG file. We have attempted to apply a font to the image using CSS stylesheet for example,

img { font-family: 'OpenSans' !important; }

We've defined OpenSans font in our same stylesheet as :

@font-face { font-family: 'OpenSans'; src: url('../css/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf'); }

The font exists at the file path above. We have also applied this OpenSans font to some text successfully to prove the font is valid.
However the image seems to default to Times New Roman when viewed in the Blazor app. When opening Devtools and viewing/inspecting we see the font-family is applied.

The build platform is a Windows desktop application.

Is it possible to override the SVG file in MAUI Blazor or do we have to modify the original SVG itself?

[Xyncgas]

So
don't.. don't worry, did font file load in the network tab of your dev tool
Have you try putting the img tag inside svg tag

<svg width="90" height="90">       
     <image xlink:href="your.svg" src="yourfallback.png" width="90" height="90"/>    
</svg>

[Xyncgas]

of course if nothing works or you are too lazy to figure it out you can just assign an id to this element and use javascript interop to brutally change its font