Can't change font of homepagesearch in employee center because of a constructed style for AI Search

[SNDeveloper26]

Hello!

We are currently working on making the employee center consistent, with this, we want to use the same font. 

Unfortunately, changing the font for homepage search  on employee center is not working since it is referring to the constructed stylesheet customized for the AI search in Service Portal.  Please also note that currently the constructed stylesheet is created on the link function for the Service Portal Widget which overrides the CSS for AI Search components which are contained in a Shadow DOM.

Please see difference when elements are inspected OOTB and the our employee center:

OOTB Employee center

Our Employee Center

What has been done:
forced this tag to the instance with search for the homepage of employee center:
.input-containewr__input{

    font-family: Roboto !important;

}   

or 

input {

   font-family: Roboto !important;

}

Also checked the Themes, we have defined the desired font there. So I don't know what's affecting the employee center. Anyone has experience this before?

[RaghavSh]

@SNDeveloper26 I am not sure about the font family you are using, but below worked for me in the page specific css:

#x97d42c0553b030101865ddeeff7b12b0 input {
font-family:cursive !important
}

Please mark the answer correct/helpful accordingly.

[RaghavSh]

@SNDeveloper26 did this work for you?

[Community Alums]

Hi @SNDeveloper26 ,

Check this discussion : https://www.servicenow.com/community/employee-center-forum/how-to-change-the-font-type-of-employee-c...

[Susan Britt]

It sounds like you have already checked the Theme and Widget Instance CSS.  From my experience, if you have updated the widget instance CSS, it should override other places that come into play.  OOB, the Homepage Search widget has the font-family being inherited.  Have you tried to override that? 

Some other places to look though:

• Theme's CSS Includes (related list at the bottom of your portal record's Theme)
• Portal's CSS variables
• Portal's Homepage's Page Specific CSS

You can also go to sp_css.LIST and filter where the CSS contains the font you are seeing.