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 3: 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 4: 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