"Faux bold" in UI16 renders differently across browsers for Source Sans Pro font family; bold/italic/light text

The "faux bold" issue in UI16 causes bold/italic/light text to render differently across browsers in relation to the Source Sans Pro font family. "Faux bold" is used when a browser creates its own "bold" version of a font instead of using the actual bold version of a font. This issue also affects the "light", and "semi-bold" variations of the font family, meaning that "faux light" and "faux semi-bold" versions will be created by the browser and used in various places instead of using the corresponding version of the Source Sans Pro font family.

 

1. In Google Chrome, log on to the instance as an admin user.

2. Navigate to Incident > Open and open any incident.

3. Paste the following text in the additional comments field, and click Post.
   
   This is not bold.
   
   [code]<b>This is some bold text</b>[/code]
   
   

   Note the way the bold text appears in this browser.

4. Open Mozilla Firefox, and open the same incident.

   Note that the bold text appears much darker in this browser than in Chrome due to the use of faux bold rather than the bold variant of Source Sans Pro.

The following workaround creates a global UI Script that inserts CSS fixes into the header of the HTML page.

1. Download the two attached XML files.
2. Navigate to any list view.
3. Right-click on the list header, and choose Import XML.
4. Upload each of the files using this method.

This procedure will result in both a UI Script and a Style Sheet called PRB743094-SourceSansPro-FauxBoldFix on your instance. Once you upgrade to a version where this problem is fixed, delete both of these files.

Note: This workaround requires that global UI Scripts execute on the page. Although it covers most of the interface, it will not apply on Angular-based interfaces such as Service Portal and the Knowledge v3 home page because global UI Scripts do not execute on these pages.