topic Re: Non Standard Fonts in Dashboards & Visualizations

Non Standard Fonts

mscomms — Wed, 12 May 2021 15:03:36 GMT

I want to use my company Branding on our dashboards and we use Bariol as our typeface, can I add this as a custom font to splunk

Re: Non Standard Fonts

kamlesh_vaghela — Wed, 12 May 2021 16:07:19 GMT

@mscomms

Yes, you can add custom font into Splunk Dashboards. Please check below example.

Before this first download the required fonts and copy into SPLUK_HOME/etc/apps/YOUR_APP/appserver/static folder.

Put below css in same folder.

font.css

@font-face { font-family: 'bariolregular'; src: url('bariol_regular-webfont.eot'); src: url('bariol_regular-webfont.eot?#iefix') format('embedded-opentype'), url('bariol_regular-webfont.woff2') format('woff2'), url('bariol_regular-webfont.woff') format('woff'), url('bariol_regular-webfont.ttf') format('truetype'), url('bariol_regular-webfont.svg#bariolregular') format('svg'); font-weight: bold; font-style: normal; } .abc { font-family: 'bariolregular' !important; font-weight: bold !important; }

XML

<dashboard stylesheet="font.css"> <label>Add for</label> <row> <panel> <html> <div class="abc"> Test Text with bariolregular </div> <div> Test Text with default </div> </html> </panel> </row> </dashboard>

Please try and let me know if any issue.

If this reply helps you, an upvote would be appreciated.

Thanks
Kamlesh Vaghela

Re: Non Standard Fonts

mscomms — Thu, 13 May 2021 09:07:41 GMT

Brilliant thanks I will give that a go

Re: Non Standard Fonts

mscomms — Thu, 13 May 2021 09:37:58 GMT

Thanks Kamlesh worked like a charm, had to edit as my fonts were otf and ended up with

@font-face { font-family: 'bariolregular'; src: url('Bariol_Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } .abc { font-family: 'bariolregular' !important; font-weight: bold !important;

Re: Non Standard Fonts

kamlesh_vaghela — Thu, 13 May 2021 09:57:28 GMT

Great @mscomms

you can accept the Solution to close the question