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
Login into ServiceNow as an admin
Go to ServiceNow > Portals
Select your portal, usually the portal with URL suffix of sp
Open your theme, usually “Stock
STEP 5: ADD CSS Include for CSS File URL
On the Theme Form, at the bottom click the CSS Includes Related List
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
Right Click the header and select Save
STEP 5: ADD CSS INCLUDE And STYLESHEET
Go back to your Theme
Add a new CSS Include.
Name: Custom CSS
Source: Stylesheet
Order: 50
Right Click the header and select Save
Click the Magnifying glass on the stylesheet field
Click New
Give it a name, like "myCustom.css" or something more creative
Click Submit
STEP 6: ADD CSS
Click the "info" button next to the stylesheet you created
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
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