When using the Career Site Builder Custom Fonts functionality, web browsers do not properly render this custom font and a different font is shown instead.
Image/data in this KBA is from SAP internal systems, sample data, or demo systems. Any resemblance to real data is purely coincidental.
SAP SuccessFactors Recruiting Marketing (RMK)
- Career Site Builder
Reproducing the Issue
The issue can be recreated by opening the site in the browser. The custom font is not rendered as expected
This issue can be caused by an Internet Explorer limitation as this web browser is currently unable to work with all existing fonts.
The issue could also be with the custom font itself.
In order to ensure that a font will work on Internet Explorer, it should be checked (before uploading in CSB) for the file property ‘Font embeddability’.
The below image shows how to view the file property.
Right click on the font file
- Click on ‘properties’
- Click on ‘details’ tab.
- The ‘Font embeddability’ should be ‘Installable’.
Values for this property that will not work in Internet Explorer include ‘Preview & Print’ ‘No Embedding’ and ‘Editable’.
This requirement for True Type Fonts in Internet Explorer is described in Microsoft documentation https://blogs.msdn.microsoft.com/ie/2010/07/15/the-css-corner-better-web-typography-for-better-design/ and https://msdn.microsoft.com/en-us/library/ms533034.aspx.
Please note that:
- The font that the browser will display instead of the custom font it cannot render will be the font that is configured as the default font for the browser itself so this cannot be controlled in CSB.
- There is also a chance that fonts with the "Font embeddability" set as "Installable" will not work due to additional validation errors that can only be spotted when using font validation tools (like for example https://sourceforge.net/projects/hp-pxl-jetready/files/Microsoft%20Font%20Validator/). Internet Explorer specifically is built in a way it will not accept fonts with internal validation errors. Other browsers like Google Chrome for instance, tend to be more open to this sort of errors.
- Note though that if a custom font contains errors, SAP Support and engineering will not investigate rendering issues.
- Customers should first test their custom font and provide the error free validation report when creating an incident with support. They should also make sure to attach the font itself to the incident.
“CSS3114: @font-face failed OpenType embedding permission check." , KBA , LOD-SF-RMK , Recruiting Marketing , Problem