Get help on Discord

Sanity Studio build duplicates CSS font import multiple times

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>);
AI Update

I understand this is frustrating! However, I need to be upfront: I couldn't find any documentation indicating this is a known issue with Sanity Studio's build process. This appears to be related to how your CSS is being processed during the build, but without being able to verify whether this is a documented Sanity issue or a configuration problem, I can't definitively say what's causing it.

Here's what I can tell you about Sanity Studio's build system:

Since Studio v3, Sanity uses Vite as the build tool (replacing webpack from v2). Vite handles CSS bundling, and how it processes @import statements can vary based on your configuration and how you're importing your CSS files.

Things to check:

  1. Where are you importing your custom CSS? Make sure you're only importing it once in your sanity.config.ts file, not in multiple places or component files. Multiple imports of the same CSS file could cause the build process to duplicate the @import statements.

  2. Are you using CSS modules? If your CSS file is named with .module.css, Vite treats it differently than regular CSS files, which could affect how imports are processed.

  3. Try moving the font import out of CSS - Instead of using @import in your CSS, add the Google Font directly to your Studio's HTML file (if you have access to it) or load it via a <link> tag. This bypasses CSS bundling entirely and is generally a more performant approach anyway.

  4. Custom Vite configuration - If you have custom Vite config in your sanity.cli.ts, it might be affecting how CSS is processed. You can customize Vite configuration in Sanity Studio, and any custom config is merged with the defaults.

The duplicate imports shouldn't break functionality (browsers ignore duplicate @import statements), but it does bloat your bundle. If you continue having issues, I'd recommend reaching out to Sanity's support or posting in the Sanity Slack community with your specific configuration details - they can help determine if this is expected behavior, a bug, or a configuration issue that needs adjustment.

Show original thread
21 replies
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.
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
user U
yeahhh its slown down the studio if you use custom font😊
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!
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;
Atleast a good solution for now! 🙌
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.
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.
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
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
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
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);
}
Thank you very much will try this now!
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
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!
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
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 ^_^
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
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
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
user U
Like a boss 😊

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?