Using Custom Fonts In Service Portal - PUBLIC Pages

[Andrew Pishchul]

I'm trying to use custom fonts (font icons) in Service Portal on a public page, but with no success. There is a great post with multiple options on how to add custom fonts (Using Custom Fonts In Service Portal) and Options #3 works perfect for logged in users. However, it doesn't work for a public role.

I tried read ACLs for sys_attachment and sp_css tables with public role, but with no success.

Any ideas on how to make custom fonts available for a public page?

[paryul]

Hello Andrew,

You might want to try looking into PRB575228 plus it has a workaround attached.

LINK:https://hi.service-now.com/nav_to.do?uri=/kb_view.do%3Fsys_kb_id%3Dd653d05c87c6bc40b43083bdff434d48

Thanks.

PS - Please mark Helpful, Like, or Correct Answer if above details worked out for you.

Paryul Jain

Technical Support Engineer UX

paryul.jain@servicenow.com

[ritesh_dalal]

You can use the attachment method but instead of using the fonts as

        url('sys_attachment.do?sys_id=FONT_ATTACHMENT_SYS_ID')

Write it as follows:

        url('FONT_ATTACHMENT_SYS_ID.iix')

We have used it successfully with both public and private sites.

PS - Please mark Helpful, Like, or Correct Answer if applicable.

Thanks,

Ritesh Dalal

Service Portal Pro

serviceportal.pro

intellective.co

[stephend_angelo]

This solution worked for me as well. Thanks for the tip!

before:

@font-face {
font-family: 'ComicSans';
src: url('/sys_attachment.do?sys_id=1d401529dbb9570001947d8bbf961974') format('woff2'),
url('/sys_attachment.do?sys_id=d9401529dbb9570001947d8bbf961970') format('woff');
}

after:

@font-face {
font-family: 'ComicSans';
src: url('1d401529dbb9570001947d8bbf961974.iix') format('woff2'),
url('d9401529dbb9570001947d8bbf961970.iix') format('woff');
}

[Raslani ABDOU-1]

Hello

3 years later, I'm facing this issue. I tried your solution, and I got a 403 forbidden. Is there something else to do to make it work?

[mandle]

As Brad, Nathan, and Andrew have previously posted... this is the best method.

Embedding fonts using Base64

The best way to include custom typefaces in your portals is to simply Base64 encode the .TTF fonts and create a simple stylesheet.

1. Navigate to https://www.fontsquirrel.com/tools/webfont-generator
2. Click "Upload Fonts" button to upload the custom .TFF font files
3. Click "Expert..." radio button
4. In the CSS section towards the bottom of the page check the "Base64 Encode" checkbox
5. Click "Download Your Kit" button.
6. Copy the contents of the "stylesheet.css" file you just downloaded
7. Open a new CSS record in ServiceNow and paste the contents
8. Relate the new CSS record to your Service Portal Theme
9. Write CSS that will designate your custom font to be used by certain HTML elements

Disclaimer. You MUST make sure that the fonts you are encoding are legally eligible for web embedding. If you are a Partner/Consultant ask the client to ensure that the fonts can be used for web embedding and get it in writing, an email. If you are an employee do the same. Fonts are artisan level works of art and the foundries deserve to get paid!

Convert your fonts from .TTF to Base64

Open the downloaded "stylesheet.css" file and copy the contents

Paste into a fresh CSS record

Relate the new CSS record to your Service Portal Theme

Examples of CSS you can write to designate the custom fonts to be used by certain elements 

body {
 font-family: 'volte_roundedregular',Arial,sans-serif;
}
h1, h2, h3, h4, h5, h6 {
 font-family: 'volte_roundedbold',Arial,sans-serif;
}