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 (
.odtfile) 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
.odtfile. Anyone ever got this kind of use cases?
Jul 20, 2021, 7:52 PM
N
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
And then it uses this FontUrl in a
.otffile!Basically the library is using code like:
import FontUrl from './my-font.otf'
@font-faceCSS declaration (using styled-components).
Jul 21, 2021, 12:07 AM
N
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
N
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
N
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.