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 React.
How it works. The font travels inside the template, so previews and exports use the exact same glyphs with no installed font.
In React.
import { Designer, Stimulsoft } from "stimulsoft-dashboards-js-react/designer";
function App() {
var report = new Stimulsoft.Report.StiReport();
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);
report.dictionary.resources.add(resource);
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;
return <Designer options={options} report={report} />;
}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.