Using Custom Fonts In Service Portal

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 Transfonter: transfonter.org.
  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.

custom-fonts

 

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:

screen-shot-2016-09-28-at-4-52-25-pm

 

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.

18 comments

  1. I have this setup and it appears to be applying the custom font however, each time I login my browser downloads the font file. Is there a different place to store the font file to keep this from happening?

    Reply

        1. Hi Nathan,

          Did you get any solution to fix the fonts file download issue. We are also seeing this issue and the screen remains intact on the login page although showing the successful login message on the screen but does not go to Self Service Portal landing page.

          Thanks,
          AP

          Reply

          1. Hi Nathan,

            DId you find the solution for this issue of file downloading ?

            Thanks,
            Vaibhav

  2. Hi Nathan,

    We have followed Option 3 to apply custom fonts on Service Portal. It worked great, however when we are performing testing across various browsers and on Operating systems, noticed that it didn’t recognize the custom font or failed to download.

    1. Mac OS
    2. Windows 10 browser

    Any help or insights into this will be much appreciated.

    Reply

    1. I have not seen this issue before, we have custom fonts with many of our portals and it’s working across browsers and operating systems. It may be an issue with your CSS but hard to tell without looking at your configuration.

      Reply

  3. Below is the CSS style code applied. Also, added woff files as attachments.

    @font-face {
    font-family: ‘RockSANSbold’;
    src: url(‘/sys_attachment.do?sys_id=579c1468db3376801ea2f076bf96193a’);
    src: url(‘/sys_attachment.do?sys_id=479c1468db3376801ea2f076bf961933?#iefix’) format(’embedded-opentype’),
    url(‘/sys_attachment.do?sys_id=579c1468db3376801ea2f076bf96193a’) format(‘woff’),
    url(‘/sys_attachment.do?sys_id=9f9c1468db3376801ea2f076bf961938’) format(‘truetype’),
    url(‘/sys_attachment.do?sys_id=5f9c1468db3376801ea2f076bf961936#RockSANSbold’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: ‘RockSANS’;
    src: url(‘/sys_attachment.do?sys_id=303068e8db3376801ea2f076bf96196c’);
    src: url(‘/sys_attachment.do?sys_id=dc302c28db3376801ea2f076bf9619d7?#iefix’) format(’embedded-opentype’),
    url(‘/sys_attachment.do?sys_id=303068e8db3376801ea2f076bf96196c’) format(‘woff’),
    url(‘/sys_attachment.do?sys_id=783068e8db3376801ea2f076bf96196a’) format(‘truetype’),
    url(‘/sys_attachment.do?sys_id=283068e8db3376801ea2f076bf961968#RockSANS’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    h1,h2,h3,h4,h5,h6{
    font-family: “RockSANS”;
    }

    body{
    font-family: “RockSANS”;
    }

    Reply

  4. One more thing, Option 3 is not working at all for all other users except Admin users. Seems role/permission issues.

    Any suggestion to overcome this issue, as the font files are not getting download for them?

    Reply

    1. Just solved this on mine…. create an ACL to allow read access to “sp_css”, within your application scope.

      Reply

      1. Adding the ACL for sp_css didn’t solve the problem for me, but then I read that the imported files are stored in the sys_attachment table; so I added a read ACL for the sys_attachment table and it worked!

        Reply

  5. Hello Nathan,

    I encountered an issue in Internet Explorer 11.371.16299.0 and Edge 41.16299.371.0 with this approach. Sys_ids of attachments are correct. In Chrome and Firefox this all works nicely.

    Do you have any pointers? I found your solution just by googling so I am very new to custom fonts for ServiceNow

    Regards,
    Michal

    Reply

  6. Hello Nathan,

    We try to use option 2, but when try to upload our font, we got below error, did you ever face it? What can be the issue?

    “FontShop has requested that their font Mark Pro Bold be blacklisted by the Generator. You will not be able to convert this font.”

    Thanks & Regards,
    Michal

    Reply

  7. We’ve been trying to apply option 3 but the attachment tries to download at login. Has anybody been able to solve this? Hopefully you wonderful SNow Pro’s are still following this thread…

    We also tried option 2 but the font owner supposedly blacklisted the option to convert their font to base64.

    Reply

      1. For anyone that may come across this, it can be done with the Windows certutil command.

        certutil -encode myfont.woff tmp.b64 && findstr /v /c:- tmp.b64 > encodedfont.txt

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *