Using Custom Fonts In Service Portal

[nathanfirth]

A question that I get asked a lot is how to use custom fonts in Service Portal.

Here are the three primary ways:

Option 1:

The easiest option is through Google Fonts.

1. Select the Google font you want to use.
2. Copy the font's style sheet URL.
3. Go to your theme and add a new CSS Include.
4. Make sure the "Source" is selected to URL and then paste the CSS URL.
5. Click save.

Now you can reference the font in your CSS.

Option 2:

1. You'll need to encode your fonts using base64 and then include them in the CSS Includes of your theme. You can use this free tool by Font Squirrel: Create Your Own @font-face Kits | Font Squirrel.
2. Use the "expert" option, then you will see an option for base64 encoding in the CSS section.
3. Select "Base64 Encode."
4. Once exported, add the generated code as a CSS include on your theme.
   For more information see: Learn how to create custom CSS in your theme here.

Option 3:

Another approach is to upload your font files as attachments to the CSS Includes record and then reference them with "sys_attachment.do?" and passing in the sys_id as a parameter. See the following example:

For additional information on CSS fonts, here's an article that I have found to be very helpful.

If you find this useful, let me know in the comments below