Blog

Service Portal - Google Fonts

How to use Google Fonts in the Service Portal.

Also see my article, Service Portal: Custom Fonts to use other fonts.

Step 1: Go to Google Fonts

Go to https://fonts.google.com/

Step 2: Select a font and url

Select a font you want to use, after you select it, copy the url

STEP 4: SELECT THEME

  1. Login into ServiceNow as an admin

  2. Go to ServiceNow > Portals

  3. Select your portal, usually the portal with URL suffix of sp

  4. Open your theme, usually “Stock

STEP 5: ADD CSS Include for CSS File URL

  1. On the Theme Form, at the bottom click the CSS Includes Related List

  2. Click New

    • Name: "Lobster" or your font name

    • Select Source: URL

    • Add your google Font URL like: https://fonts.googleapis.com/css?family=Lobster

    • Order: 10

  3. Right Click the header and select Save

STEP 5: ADD CSS INCLUDE And STYLESHEET

  1. Go back to your Theme

  2. Add a new CSS Include.

    • Name: Custom CSS

    • Source: Stylesheet

    • Order: 50

  3. Right Click the header and select Save

  4. Click the Magnifying glass on the stylesheet field

  5. Click New

  6. Give it a name, like "myCustom.css" or something more creative

  7. Click Submit

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

/* Change Homepage Header Font */
#homepage-search > div > h1 {
  font-family: 'Lobster', sans-serif;
  font-weight: 400;
}
/* Change H2 Font */
h2 {
  font-family: 'Lobster', sans-serif !important;
  font-weight: 400;
}
/* Change H3 Font */
h3 {
  font-family: 'Lobster', sans-serif;
  font-weight: 400;
}

Result

Theme

Example Google Font in Action


NOTES

  • You need to clear your cache (cache.do) to see your changes take effect

  • Please note that it is important to specify the font-weight for certain fonts, otherwise they don’t work