Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Discussion on repeated CSS font imports in Sanity Studio builds

21 replies
Last updated: Feb 8, 2022
One quick question, when i build Sanity studio the CSS file will repeat the CSS font import like 10 times in a row?

@import url("<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap>");

:root {
  --color-bubblegum: #ff99f3;
  --color-neon: #00dbff;
  --color-sand: #ffd662;
  --color-offWhite: #fff8ea;
  --color-eggPlant: #2e092a;
  --color-navyBlue: #00112a;
  --color-light: #fff;

  /* Font Family */
  --font-family-base: "Roboto";

  /* Branding */
  --brand-primary: var(--color-navyBlue);
  --state-info-color: var(--color-bubblegum);

  /* Navbar */
  --main-navigation-color: var(--color-navyBlue);
  --main-navigation-color--inverted: var(--color-light);
}
Build CSS:


@import url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap>);
Feb 4, 2022, 10:50 PM
user U
when you run “sanity build” output folder dist has the CSS file when you open it, the CSS import is like repeating 10+ times.
Feb 4, 2022, 11:01 PM
I created a variableOverrides.css file in the studio root, imported a reference to that to sanity.json parts… and got 42 lines of the import in my build css similar to you. I don’t recall digging into the build styles on other react projects, so I don’t know if this is a framework issue or not. Nor am I sure that this is attempting the import 42 times - good catch. I’m going to try to experiment with this for a moment
Feb 4, 2022, 11:03 PM
user U
yeahhh its slown down the studio if you use custom font😊
Feb 4, 2022, 11:07 PM
just tinkering, please don’t take this yet as the best method for anything:
• tried adding the google roboto imports to public index.html and removing the @import from the stylesheet
• good news: this removed the build references
• bad news: this defaulted all fonts to the ugly default serif - doh!
Feb 4, 2022, 11:11 PM
also notable, you may want to add a fallback font to your stylesheet explicitly, but as my first pass didn’t work this may not be the best method either
_/* Font Family */_
  --font-family-base: “Roboto”, sans-serif;
Feb 4, 2022, 11:12 PM
Atleast a good solution for now! 🙌
Feb 4, 2022, 11:16 PM
ok, I’ve been testing a few different methods - reference: https://www.better.dev/how-to-add-fonts-to-a-react-project
There are a few moving parts here: my environment, html head, react framework, styled components, custom tweaks in the studio build tool… etc.

What doesn’t work so far:
• the prescribed method is causing the build multiline bug in both of our examples rn
• adding prefetch into 
./public/index.html
head and removing the import from the override sheet removes all custom fonts What does work:
• adding built-in standard fonts to the override sheet, like “sans-serif”, but it appears a bit picky about what is or isn’t in quotes vs typical css.
I’m testing setting @font-face in the override sheet now.
Feb 4, 2022, 11:30 PM
ok, I’ve been testing a few different methods - reference: https://www.better.dev/how-to-add-fonts-to-a-react-project
There are a few moving parts here: my environment, html head, react framework, styled components, custom tweaks in the studio build tool… etc.

What doesn’t work so far:
• the prescribed method is causing the build multiline bug in both of our examples rn
• adding prefetch into 
./public/index.html
head and removing the import from the override sheet removes all custom fonts What does work:
• adding built-in standard fonts to the override sheet, like “sans-serif”, but it appears a bit picky about what is or isn’t in quotes vs typical css.
I’m testing setting @font-face in the override sheet now.
Feb 4, 2022, 11:30 PM
also if you comment out your font-family import in the override sheet completely and rebuild, it should default back to the built-in sans-serif font
Feb 4, 2022, 11:31 PM
cool trick:
If you’re using google font imports, you can browse the link and it will give you the @font-face settings in plain text:
https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap
Feb 4, 2022, 11:36 PM
cool trick:
If you’re using google font imports, you can browse the link and it will give you the @font-face settings in plain text:
https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap
Feb 4, 2022, 11:36 PM
okay give this a shot:
1. as a quick cheat - in a browser, go to the font import url of choice, like the one for roboto I linked above.
2. paste all of the 
@font-face
imports you think you’ll need (if you’re just publishing to english speakers, you may not need to bother importing anything other than latin and latin-ext) into your overrides stylesheet3. set the base font-family like you did previously: 
--font-family-base: _'Roboto'_;
4. I might also set a typical fallback here like sans-serif, but formatting may need some tinkering here 
--font-family-base: _'Roboto', sans-serif_;
Here’s my test of your stylesheet with only the latin imports. And in the build, it only shows imports from these @font-face imports listed in the stylesheet


/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(<https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.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: 400;
  font-display: swap;
  src: url(<https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.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;
}


:root {
  --color-bubblegum: #ff99f3;
  --color-neon: #00dbff;
  --color-sand: #ffd662;
  --color-offWhite: #fff8ea;
  --color-eggPlant: #2e092a;
  --color-navyBlue: #00112a;
  --color-light: #fff;

  /* Font Family */
  --font-family-base: 'Roboto';

  /* Branding */
  --brand-primary: var(--color-navyBlue);
  --state-info-color: var(--color-bubblegum);

  /* Navbar */
  --main-navigation-color: var(--color-navyBlue);
  --main-navigation-color--inverted: var(--color-light);
}
Feb 4, 2022, 11:44 PM
Thank you very much will try this now!
Feb 4, 2022, 11:46 PM
I’ve been trying harder to pay attention to extra modules and services that I import as modules or on the fly in my production projects. You may want to import your fonts into your studio or any other react projects rather than linking to 3rd party external services as well.

https://www.npmjs.com/package/roboto-fontface
Feb 4, 2022, 11:47 PM
I will ask the team if this is normal behavior for font imports and maybe if our prescribed method needs another look. Thanks for the good find!
Feb 4, 2022, 11:48 PM
alternatively to using npm/yarn, you can also download custom fonts and should be able to put them in 
./static
to import into your custom stylesheets or elsewhere
Feb 4, 2022, 11:52 PM
I have a discussion going to discuss this interesting build behavior vs the documented method. I hope the font-face workaround or suggested module methods work for you in the meantime. Thanks again for the find ^_^
Feb 5, 2022, 12:22 AM
Hi Nino. Followup from our previous conversation:
You can also track dev progress in the public repo here if you would like:

https://github.com/sanity-io/sanity/pull/3137
Feb 7, 2022, 8:29 PM
Hi Nino - quick followup on this topic. The studio team appears to have had a feature in place to use 
@import
fonts. This is getting another pass now - you can keep an eye on the public repo topic below if you’d like.
This setting may change - or it is possible that I wasn’t doing this quite right, but this is from my own tests using the 
fonts-style
flag from a different stylesheet in sanity.json - “parts” imports:
{
      "implements": "part:@sanity/base/theme/variables/fonts-style",
      "path": "stylesImports.css"
    },
    {
      "implements": "part:@sanity/base/theme/variables/override-style",
      "path": "stylesCustom.css"
    },
As it looks like using 
@font-face
or importing fonts directly or via node modules works, I’m going to ✅ this thread, but please reach out if you need any further help.

https://github.com/sanity-io/sanity/pull/3137
Feb 7, 2022, 8:35 PM
Hi Nino - quick followup on this topic. The studio team appears to have had a feature in place to use 
@import
fonts. This is getting another pass now - you can keep an eye on the public repo topic below if you’d like.
This setting may change - or it is possible that I wasn’t doing this quite right, but this is from my own tests using the 
fonts-style
flag from a different stylesheet in sanity.json - “parts” imports:
{
      "implements": "part:@sanity/base/theme/variables/fonts-style",
      "path": "stylesImports.css"
    },
    {
      "implements": "part:@sanity/base/theme/variables/override-style",
      "path": "stylesCustom.css"
    },
As it looks like using 
@font-face
or importing fonts directly or via node modules works, I’m going to ✅ this thread, but please reach out if you need any further help.

https://github.com/sanity-io/sanity/pull/3137
Feb 7, 2022, 8:35 PM
user U
Like a boss 😊
Feb 8, 2022, 9:08 AM

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?