Blog

Service Portal: Custom Fonts

Step 1: Download font

Here are some of the available font types you could use on your site:

  • TrueType | .ttf
  • OpenType | .otf
  • The Web Open Font Format | .woff
  • The Web Open Font Format | .woff2
  • SVG | .svg
  • Embedded OpenType Fonts | .eot 

Once you have the font you want downloaded, you upload it to ServiceNow.

Step 2: Upload Font to ServiceNow

  1. Left Navigator Bar > Service Portal > Portals
  2. Click your Portal
  3. Click the information button next to the Theme Field. You are now looking the the Theme form
  4. Click the paperclip attachment button
  5. Add your font

Step 3: Note the Attachment Sys ID

  1. For the attachment you just added. Click the [view] button next to it.
  2. Copy the sys_id in the URL
  3. Save the sys_id address to notepad or use your powerful mind to store it

You'll need this in the next step 6.

Step 4: Add CSS Include

  1. On the Theme Form, at the bottom click the CSS Includes Related List
  2. Click New
  3. Give it a name, like "Custom CSS" or something more creative
  4. Right Click the header and select Save

Step 5: Add Stylesheet

  1. From the CSS Include you created
  2. Click the Magnifying glass on the stylesheet field
  3. Click New
  4. Give it a name, like "Custom CSS" or something more creative
  5. Click Submit

To recap at this point, you have created this stuff:

  • Font Attachment
  • CSS Include
  • Stylesheet

Step 6: Add CSS

  1. Click the "info" button next to the stylesheet you created
  2. Adjust the CSS and click save

Below is some EXAMPLE CSS

  • You can name the font-face whatever you like.  Personally I name them the same as the font name.
  • You'll need to change the font-face url with the Attachment sys_id from Step 3
@font-face {
   font-family:'savatage';
   src: url('/sys_attachment.do?sys_id=8ccbd5c04f620300f6c101f18110c716');
   font-weight: normal;
   font-style: normal;
}
/* Change Homepage Header Font */
#homepage-search > div > h1 {
  font-family:'savatage';
}
/* Change H2 Font */
div.panel-heading > h2 {
  font-family:'savatage';
}
/* Change H3 Font */
h3 {
  font-family:'savatage';
}

Here is an SP homepage with an interesting font choice:

Notes

  • Sometimes you need to clear your cache (cache.do) to see your changes take effect
  • If the font wants to "download" instead of work, you may need to adjust the read ACL for sp_css and sp_theme to allow all users to see that.  Just add the role: public to those acls.  
https://<YOUR INSTANCE>.service-now.com/sys_security_acl_list.do?sysparm_query=name%3Dsp_theme%5EORname%3Dsp_css%5Eoperation%3Dread
  • If you have trouble with the font wanting to download to the user's computer. Encode the font to base64 (there is helper software to do that on the internet), and add to the stylesheet.