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

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Event Series: Level up your SOC: Advancing with Splunk Enterprise Security

Announcing Modern Navigation: A New Era of Splunk User Experience

SOC4Kafka - New Kafka Connector Powered by OpenTelemetry

Join the Conversation