The Zurich release has arrived! Interested in new features and functionalities? Click here for more

Font change in employee center

MohdShahidA
Tera Contributor

I want to change my employee center font in the "Gill Sans Nova" But its not present OOB.so how can we change the font.

 

4 REPLIES 4

MohdShahidA
Tera Contributor

if i want to change my font the OOB font is seeing. so how can we resolve this issue so please help me on this situation.

 

G Ponsekar
Giga Guru

Hi @MohdShahidA ,

 

Follow below steps to change font-family in Employee center

1.  Download "Gill Sans Nova" font from Google fonts or https://online-fonts.com/fonts/gill-sans-nova

This will download the zip folder containing different font styles of Gill Sans Nova

2. Open https://transfonter.org/

3. Click Add fonts button and upload the relevant font

4. Turn ON the Base64 encode

5. Click the convert button

6. It will download the zip folder and from that folder open stylesheet doc and copy the entire font face content

7.  Now open the EC Theme record (https://<instanceurl>/sp_theme.do?sys_id=9b6f06d71bb8f85047582171604bcb9c)

8. Go to Related list CSS Includes and click New

9. Name it and create new stylesheet and save it

10. Now open the newly created stylesheet and paste the font-face which you have copied and add body and <h> tags and save it.

like below

@font-face { /**paste the font-face copied from downloaded stylesheet**/
font-family: 'Gill Sans Nova Book';
src: url('data:font/ttf;charset=utf-8;base64,font-weight: normal;
font-style: normal;
font-display: swap;
}

body {
font-family: 'Gill Sans Nova Book';
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Gill Sans Nova Book';
}

 

11. Finally save the stylesheet and refresh the employee center and you will able to see the changes

 

If I could help with your query, please thumbs up and mark as accepted solution

 

Thanks, GP

Bhuvan
Kilo Patron

@MohdShahidA 

 

Refer below knowledge article and post to create custom fonts

 

https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0754969

 

https://www.servicenow.com/community/developer-blog/using-custom-fonts-in-service-portal/ba-p/228924...

 

If this helped to answer your query, please mark it helpful & accept the solution.

 

Thanks,

Bhuvan

kaushal_snow
Mega Sage

Hi @MohdShahidA ,

 

1. You need to download the Gill Sans Nova font....

Go to Transfonter.org > Upload the font and enable Base64 encoding.

Click Convert, then open the downloaded stylesheet and copy the entire @font-face block.

 

2. Add the font to your Servicenow EC theme:

Navigate to: Service Portal → Themes, and open the EC Theme record in your instance.

In the CSS includes related list, click New to create a new stylesheet.

Paste your @font-face block, then add CSS rules like:

@font-face {
/* paste the Base64-encoded font-face here */
font-family: 'Gill Sans Nova';
/* ... */
}

body, h1, h2, h3, h4, h5, h6 {
font-family: 'Gill Sans Nova', sans-serif;
}

 

If you found my response helpful, please mark it as ‘Accept as Solution’ and ‘Helpful’. This helps other community members find the right answer more easily and supports the community.

 

 

Thanks and Regards,
Kaushal Kumar Jha - ServiceNow Consultant - Lets connect on Linkedin: https://www.linkedin.com/in/kaushalkrjha/