I could think of two ways to setup any custom font for ESS Portal.

(a) Using Google Font:

The steps involved:

#1. Go to Google Fonts and select the font you would like to use.

#2. Copy the @import syntax provided by google and paste in your CSS.

        Ex: @import url(https://fonts.googleapis.com/css?family=Poiret+One);

#3. Once you have imported Google font into one of your CSS, and CSS is part of the theme you have applied on the portal. The font definition would be available for the entire portal. You can now use this font-family for any html element you want. In this example I applied the font pretty much on the entire portal which you can see on the below screenshot as end result.

(b) Upload your own Font:

If you want to use a font which is not available on portal and nothing similar found on the Google Fonts then you can upload your own font.

Please follow these steps:

#1: Create any record to attach your custom font files to it. In this example I created an IMAGE named "custom-font" and attached all the fonts to it.

This is my one place where I can upload all my fonts. Please refer below screenshot which shows "Omnes" font is attached with image.

#2. The records for   font attachments can be seen at sys_attachment.list

    For example:

#3. Based on all the fonts you have uploaded, get the sys_id for each as you would need that in css definition. Create a New CSS for these font definition.

You can add to any existing css, but its better to keep the customization separate in a new stylesheet.

For Example:

@font-face {

      font-family:"omnes-pro";

      src:url("sys_attachment.do?sys_id=6f7712588136a1003cbb80db877182b1");

      src:url("sys_attachment.do?sys_id=6f7712588136a1003cbb80db877182b1?#iefix")format("eot"),

      url("sys_attachment.do?sys_id=a78712588136a1003cbb80db877182b4") format("woff"),

      url("sys_attachment.do?sys_id=d68712588136a1003cbb80db877182b3") format("truetype"),

      url("sys_attachment.do?sys_id=b88712588136a1003cbb80db877182b2") format("svg");

}

Use the font on some html element:ex:

body { font-family: 'Omnes-Pro'; }

Refer below screenshot for the same:

#4. Once your font stylesheet is ready go ahead and add it to the theme you are using for portal.

#5.   The end result should look something like these with change in font.

Thanks,

Manjul