Dashboards & Visualizations

Non Standard Fonts

mscomms
Path Finder

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 

Labels (4)
Tags (1)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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

View solution in original post

mscomms
Path Finder

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;

 

 

0 Karma

mscomms
Path Finder

Brilliant thanks I will give that a go

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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

kamlesh_vaghela
SplunkTrust
SplunkTrust

Great @mscomms 

you can accept the Solution to close the question

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...