Skip to content
👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
Get help on Slack

Trouble with `@font-face` loaded fonts not taking when adding custom branding CSS to a studio

9 replies
Last updated: Feb 18, 2022
Anyone know why 
@font-face
loaded fonts are not taking when adding custom branding CSS to a studio?
Feb 18, 2022, 6:45 PM
1. I’ve got my 
skin.css
being included via 
sanity.json
, which is loading properly.2. I’ve added my fonts to the 
static
folder, in a 
fonts
sub-folder.3. I’m importing them in my 
skin.css
at the top, like this: 
@font-face {
  font-family: 'Sang Bleu';
  src: url('/fonts/SangBleuSans-RegularItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
4. And I’m referencing them in my CSS like this:

.pt-editable * {
  font-family: 'Sang Bleu', Georgia, Times, serif !important;
}
Feb 18, 2022, 6:47 PM
But no matter what, it’s falling back to 
Georgia
Feb 18, 2022, 6:47 PM
no errors loading the fonts, no CORS issues, etc.
Feb 18, 2022, 6:47 PM
no idea why this isn’t working
Feb 18, 2022, 6:47 PM
can also confirm that the fonts are loading in just fine:
Feb 18, 2022, 7:05 PM
and the CSS is there:
Feb 18, 2022, 7:08 PM
I admit that I often cheat and use google’s imported format as a working example personally. Perhaps try woff2 format with your local font and or swap in a different font file locally to see if it renders. Alternatively, try testing with a public google font to try to isolate the issue to either a stylesheet configuration or font-file problem or a build problem.
Here is a clip from google’s roboto import sheet:


/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(<https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxGIzIXKMnyrYk.woff2>) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(<https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzIXKMny.woff2>) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Feb 18, 2022, 8:59 PM
I am not sure off the top of my head if explicitly defined unicode ranges are necessary, but this may be another thing to try in your troubleshooting steps.
Feb 18, 2022, 9:01 PM
I am not sure off the top of my head if explicitly defined unicode ranges are necessary, but this may be another thing to try in your troubleshooting steps.
Feb 18, 2022, 9:01 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?