Solved: Non Standard Fonts

mscomms · ‎05-12-2021

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

kamlesh_vaghela · ‎05-12-2021

@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 · ‎05-13-2021

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;

mscomms · ‎05-13-2021

Brilliant thanks I will give that a go

kamlesh_vaghela · ‎05-12-2021

@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 · ‎05-13-2021

Great @mscomms

you can accept the Solution to close the question

Non Standard Fonts

CSS

form

simple XML

table

Get the T-shirt to Prove You Survived Splunk University Bootcamp

Introducing the Splunk Community Dashboard Challenge!

Wondering How to Build Resiliency in the Cloud?