1

How can I specify "sans-serif" as the fallback font in the font stack for a Community page?

The template is based on the Napali theme and uses a custom font. For some users, the custom font does not load and they instead see Times New Roman. I would like to specify that they see any other san-serif font in those cases.

Setting the font stack in the body did not help, with or without !important.

body {
  font-family: "Colfax", Arial, sans-serif;
}

The only thing that I've been able to make work is to select elements at a very high specificity and set the font stack there. This is not very sustainable, though, as I keep finding items that are still falling back to serif fonts.

@font-face {
  font-family: "Colfax", Arial, sans-serif;
  src: url('/sfsites/c/resource/ColfaxRegular/Colfax-Regular.otf') format('otf');
}

@font-face {
  font-family: "Colfax-Medium", Arial, sans-serif;
  src: url('/sfsites/c/resource/ColfaxMedium/Colfax-Medium.otf') format('otf');
}

body, .profileName, .uiMenuItem a, .uiOutputText {
  font-family: "Colfax", Arial, sans-serif;
}

.forceCommunityGlobalNavigation *, .forceCommunityGlobalNavigation button, .forceCommunityGlobalNavigation button:focus, .forceCommunityGlobalNavigation button[disabled], .forceCommunityGlobalNavigation button:hover, .forceCommunityGlobalNavigation a:focus, .forceCommunityGlobalNavigation a:hover {
  font-family: "Colfax", Arial, sans-serif;
}

.forceCommunityGlobalNavigation .slds-list__item a, .forceCommunityGlobalNavigation .slds-list__item button, .uiButton {
  font-family: "Colfax", Arial, sans-serif !important;
}

.forceCommunityHeadline .headlineTitleText {
  font-family: "Colfax", Arial, sans-serif;
}
3
  • Check if answer in this similar question can help
    – Shamina
    Dec 12 '19 at 10:49
  • No, it's not similar. This question is about specifying fallback font for the community page style definition.
    – Eduard
    Dec 12 '19 at 11:21
  • 1
    Yea the very high level of specificity has been a problem of Salesforce for a long while. I wish I had an answer for you but I can only say that I feel your pain.
    – gNerb
    Dec 12 '19 at 19:24
1
+50

Try setting it at the "html" level - does that work?

body, html {
   font-family: "Colfax", Arial, sans-serif;
}
2
  • Yeah, I can see that this definition comes over to page. Yet it gets overridden by other css - i.imgur.com/UtFQiMZ.png
    – Eduard
    Dec 12 '19 at 21:33
  • Try adding !important and/or, add button, input, optgroup, select, and textarea to the style entry
    – Paul N
    Dec 14 '19 at 4:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.