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 React.
How it works. The engine loads the font before rendering, so custom typography appears in the designer, viewer and exports.
In React.
import { Designer, Stimulsoft } from "stimulsoft-dashboards-js-react/designer";
function App() {
var report = new Stimulsoft.Report.StiReport();
report.loadFile("Dashboards/CusomFontDashboard.mrt");
// Adding Custom Font
Stimulsoft.Base.StiFontCollection.addFontFile("Fonts/LongCang-Regular.ttf");
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;
return <Designer options={options} report={report} />;
}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.