Changing the default font in service portal

Firas
Kilo Contributor

‎07-30-2019 01:51 AM

Hi 

 

I'm following the steps to include a custom font (Montserrat) from google fonts

here is the article:

https://community.servicenow.com/community?id=community_blog&sys_id=c95d2629dbd0dbc01dcaf3231f9619ed

And I went to the portals and select my sp portal, and open the theme record and add the font link in the css include (image below).

Now after including the font in the css include in the theme of the sp, what to do next?

I notice in the article it says that I need to reference the font in the css, but which css? that affect the whole portal?

I do not thing it's a wise decision to go for every widget and put the css reference there?

font reference: font-family: 'Montserrat', sans-serif;

So will you please inform me where to but the reference and how?

 

find_real_file.png

Labels:
Preview file
43 KB
0 Helpfuls
  • 8,369 Views
1 REPLY 1

amaradiswamy
Kilo Sage

‎07-30-2019 06:10 AM

Hi,

You need to define this in style sheet. we need to apply the font-family by targeting the elements, classes or tags as per your requirement. Below is an example which worked for me.

 

@font-face {
   font-family:'Great Vibes';
   src: url('/sys_attachment.do?sys_id=493369dadb523300ca665608689619d6');
   font-weight: normal;
   font-style: normal;
}
/* Change Homepage Header Font */
#homepage-search > div > h1 {
  font-family:'GreatVibes';
}
/* Change H2 Font */
div.panel-heading > h2 {
  font-family:'GreatVibes';
}
/* Change H3 Font */
h3,h2,h1 {
 
}
.panel-heading
{
font-family:'GreatVibes';
}
ul,li
{
font-family:'GreatVibes';
}
.panel-body
{
font-family:'GreatVibes';
}
p
{
 font-family:'GreatVibes';
}
body
{
 font-family:'GreatVibes';
}

 

You may follow steps mentioned in below blog.

https://www.servicenowelite.com/blog/2017/11/15/service-portal-custom-font