SP5: Custom font isn't applied component with Blazor.

[sazus]

Question:

so I try for adding custom font using the below method in web assembly on blazor.

ScottPlot.StylersFontStyler.Set(string fontName)

but it doesn't seem to load the proper font.

Checking developer tool on the browser, I see an interesting situation.

1. The HTML Section Heading elements(H3) set in the razor file are being rendered with the appropriately specified font.(fig1)

2. ScottPlot's components in the razor file , It only seem to support the Noto Mono font.(fig2)
   (ScottPlot component div elements have the appropriate font-family.)

I have implemented a small code using the ScottPlot project's Sandbox -Sandbox.Blazor.WebAssembly.
Please let us know if we are missing any necessary steps to properly pass fonts to ScottPlot components.

(fig1)

(fig2)

ScottPlot Version:

• ScottPlot.Blazor v5.0.34
• .NET8.0.0

Code Sample:

Small changed at src/ScottPlot5/ScottPlot5 Sandbox/Sandbox.Blazor.WebAssembly/Pages/Quickstart.razor

@page "/"
@page "/quickstart"

@using System.Diagnostics
@using System.Reflection
@using System.Xml.Linq
@inject IRecipesService RecipeService

<div class="container">
    <h3>ScottPlot Blazor Quickstart</h3>
    <h3>スコットプロット クイックスタート</h3>
    <div><a href="https://scottplot.net/quickstart/blazor/">https://scottplot.net/quickstart/blazor/</a></div>

    /// Add Scottplot components HERE
    <BlazorPlot @ref="BlazorPlot" Style="width: 600px; height: 400px;" />
</div>

@code {
    BlazorPlot BlazorPlot = new();

    protected override void OnAfterRender(bool firstRender)
    {
        var plot = BlazorPlot.Plot;
　　
        /// Set custom font on ScottPlot
        plot.Font.Set("Noto Sans JP");

        /// Check current font family at componets
        var fontList = string.Join(", ", SkiaSharp.SKFontManager.Default.GetFontFamilies());
        plot.Add.Text("Get font-family lists : " + fontList.ToString(), 10, 10);

        if (firstRender)
        {
            plot.Add.Signal(Generate.Sin());
            plot.Add.Signal(Generate.Cos());

            /// custom fonts are not available and displayed as blank paper
            plot.Title("スコットプロット");
            plot.Font.Automatic();
        }
        base.OnAfterRender(firstRender);
    }
}

---

Small changed at src/ScottPlot5/ScottPlot5 Sandbox/Sandbox.Blazor.WebAssembly/wwwroot/css/app.css

 ?@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
 + 
 + @font-face {
 +     font-family: 'Noto Sans JP';
 +     src: url('../fonts/NotoSansJP-Thin.ttf');
 + }
   
   html, body {
 -     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 +     font-family: 'Noto Sans JP', Helvetica, Arial, sans-serif;
   }
   
   h1:focus {

[aespitia]

just to confirm, that font is installed on whatever server you're deploying on? also, if you're installing on a server, you have to make sure to install the font as an admin, and select "install for all users"

[sazus]

We are currently running Blazor on the same server/client PC.
On the executing PC, I also install the font as an admin and select "install for all users" .

When running on wasm, I can't seem to get the fonts on the executing PC.
I think the best solution is to be able to use @font-face or font-family fonts defined on css.

[aespitia]

in my instance, i guess i'm generating the image server side, and then serving the image itself