Embedding a font as a dashboard resource makes the template self-contained — it renders with the same typography everywhere.

In Angular.
import { Component } from "@angular/core";
import { Designer, Stimulsoft } from "stimulsoft-dashboards-js-angular/designer";

@Component({
    imports: [Designer],
    template: `<sti-designer [(report)]="report" [options]="options"></sti-designer>`
})
export class Example {
    report: Stimulsoft.Report.StiReport;
    options: Stimulsoft.Designer.StiDesignerOptions;

    constructor() {
        this.report = new Stimulsoft.Report.StiReport();
        this.report.loadFile("Dashboards/CusomFontDashboard.mrt");

        var fileContent = Stimulsoft.System.IO.File.getFile("Fonts/LongCang-Regular.ttf", true);
        var resource = new Stimulsoft.Report.Dictionary.StiResource(
            "LongCang", "LongCang", false,
            Stimulsoft.Report.Dictionary.StiResourceType.FontTtf, fileContent);
        this.report.dictionary.resources.add(resource);

        this.options = new Stimulsoft.Designer.StiDesignerOptions();
        this.options.appearance.fullScreenMode = true;
    }
}

How it works. The font travels inside the template, so previews and exports use the exact same glyphs with no installed font.