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

./public/index.html

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&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&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-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 free Explore the demo

Platform

Features

Use cases

Integrations

Learn

Build and share

Frameworks

Discover

Customer stories

Popular guides

Discussion on repeated CSS font imports in Sanity Studio builds

Sanity– build remarkable experiences at scale

Was this answer helpful?