Using a Custom Font
Our sample projects and report templates can help you learn the basics of working with our products.A custom font can be registered with the engine so the dashboard renders and exports with it.
In Angular.
How it works. The engine loads the font before rendering, so custom typography appears in the designer, viewer and exports.
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");
// Adding Custom Font
Stimulsoft.Base.StiFontCollection.addFontFile("Fonts/LongCang-Regular.ttf");
this.options = new Stimulsoft.Designer.StiDesignerOptions();
this.options.appearance.fullScreenMode = true;
}
}StiFontCollection.addFontFile(path)— register a.ttfso the engine can resolve it by name.- The font is then available to every text element in the dashboard.
How it works. The engine loads the font before rendering, so custom typography appears in the designer, viewer and exports.