Sandbox: create example projects for ASP .NET (minimal API) and Blazor server #3824
Description
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.
-
The HTML Section Heading elements(H3) set in the razor file are being rendered with the appropriately specified font.(fig1)
-
ScottPlot's components in the razor file , It only seem to support the
Noto Monofont.(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 {