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 Vue.
How it works. The engine loads the font before rendering, so custom typography appears in the designer, viewer and exports.
In Vue.
<script setup lang="ts">
import { Designer, Stimulsoft } from 'stimulsoft-dashboards-js-vuejs/designer'
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;
</script>
<template>
<Designer :report="report" :options="options" />
</template>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.