Service Portal - Embedding fonts available without login in

Vegard S · ‎10-01-2020

When embedding fonts in Service Portals, I see a common approach is to either link to an external source, such as Google Fonts. But if the font isn't available on Google Fonts, one can use attachments and link it to the sys_id of that attachment.

@font-face {
    font-family: 'ApexSans';
    src: url('/sys_attachment.do?sys_id=c0aeaf9ddb179010c8667b8239961945');
    src: url('/sys_attachment.do?sys_id=c0aeaf9ddb179010c8667b8239961945?#iefix') format('embedded-opentype'),
    url('/sys_attachment.do?sys_id=9caeaf9ddb179010c8667b8239961949') format('woff'),
    url('/sys_attachment.do?sys_id=44aeaf9ddb179010c8667b8239961948') format('truetype'),
    url('/sys_attachment.do?sys_id=0caeaf9ddb179010c8667b8239961946#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
}

However, these attachments are based on if the user has access to it or not.
So far, I've found that if I attach the fonts to a knowledge article and have that article be public to all, the fonts are available, even on the login screen of the portal.

BUT, is this the only viable approach? I would probably need to create a new Knowledge Base, and have that public, but hide it from portals.. It seems like a strange approach, but it works.

Saud1 · ‎10-01-2020

Hello Vegard,

You can use a service like transfonter to encode the fonts in base64. Then you can add it to your Service Portal theme as a CSS include.

Here are the steps:

1) Go to transfonter and upload the font.

2) Select the base64 encode option, then click convert and download:

3) Navigate to your portal's theme record. There should should be a CSS include related list at the bottom of the page. Click 'New' to include a new CSS. In the new CSS record, click on the magnifying glass for the style sheet field to open another window. Click 'New', to create a new style sheet. Copy and paste the contents of the CSS you downloaded from transfonter into the new style sheet record. Submit and submit.

4) Witness the beauty of your font:

View solution in original post

Saud1 · ‎10-01-2020