Adding a Font to the Resource
Our sample projects and report templates can help you learn the basics of working with our products.Embedding a font as a dashboard resource makes the template self-contained — it renders with the same typography everywhere.
In Angular.
How it works. The font travels inside the template, so previews and exports use the exact same glyphs with no installed font.
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;
}
}File.getFile(path, true)— read the.ttfbytes.StiResource(..., StiResourceType.FontTtf, content)+dictionary.resources.add— store the font inside the dashboard.
How it works. The font travels inside the template, so previews and exports use the exact same glyphs with no installed font.