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, 2019 at 10:49
  • No, it's not similar. This question is about specifying fallback font for the community page style definition.
    – Eduard
    Dec 12, 2019 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, 2019 at 19:24

1 Answer 1

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, 2019 at 21:33
  • Try adding !important and/or, add button, input, optgroup, select, and textarea to the style entry
    – Paul N
    Dec 14, 2019 at 4:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .