Unlock seamless workflows and faster delivery with our latest releases- get the details

Importing custom fonts in Sanity Studio using a static folder

6 replies
Last updated: Jul 21, 2021
We have a library which is importing a custom font (
.odt
file) in it. However, it seems like we cannot use this library in Sanity Studio, as the webpack config for Sanity does not know how to import/parse the
.odt
file. Anyone ever got this kind of use cases?
Jul 20, 2021, 7:52 PM
Do you really need the ODT extension? You want to upload fonts to the library right? WHy don’t you just import it in the root project folder instead of uploading it?
Jul 20, 2021, 11:07 PM
Sorry for the typo, I meant
.otf
file!Basically the library is using code like:

import FontUrl from './my-font.otf'
And then it uses this FontUrl in a
@font-face
CSS declaration (using styled-components).
Jul 21, 2021, 12:07 AM
user F
Honestly from my experience I never ever upload fonts to the media-library I would advice to add the fonts to a “static” or “fonts” folder and use it directly with an URL to the font.

import { createGlobalStyle } from "styled-components";
import MyFontOTF from "./static/fonts/my-font.otf";
import MyFontWOFF from "./static/fonts/my-font.woff";

// fontStyles.js
export const FontStyles = createGlobalStyle`

@font-face {
  font-family: 'My-Font';
  src: url(${MyFontOTF}) format('otf'),
       url(${MyFontWOFF}) format('woff');
}
`;

_app.js:

import FontStyles from "./fontStyles";

   return (
      <>
         <FontStyles />
         <Component {...pageProps} />
      </>
   )
Jul 21, 2021, 8:03 AM
user F
Honestly from my experience I never ever upload fonts to the media-library I would advice to add the fonts to a “static” or “fonts” folder and use it directly with an URL to the font.

import { createGlobalStyle } from "styled-components";
import MyFontOTF from "./static/fonts/my-font.otf";
import MyFontWOFF from "./static/fonts/my-font.woff";

// fontStyles.js
export const FontStyles = createGlobalStyle`

@font-face {
  font-family: 'My-Font';
  src: url(${MyFontOTF}) format('otf'),
       url(${MyFontWOFF}) format('woff');
}
`;

_app.js:

import FontStyles from "./fontStyles";

   return (
      <>
         <FontStyles />
         <Component {...pageProps} />
      </>
   )
Jul 21, 2021, 8:03 AM
Thanks for your feedback
user Q
, I feel this is what I will go with. I would have liked the font to be referred to directly from the package itself, but I feel I will have to got this way. Thanks for the feedback! 🙂
Jul 21, 2021, 11:45 AM
Very welcome
user F
!
Jul 21, 2021, 11:46 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.

Was this answer helpful?