Specify (fallback) font stack in Community page

Question

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;
}

Answer 1

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

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