Get help on Discord

How to configure Sanity Studio webpack to handle .odt font file imports?

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?
AI Update

I need to first clarify something important: .odt files are OpenDocument Text files (document format, like Word documents), not font files. This is quite unusual to import into a JavaScript/React library that would be used in Sanity Studio.

If your library is genuinely trying to import .odt document files (not .otf font files), you'll need to configure Sanity Studio's Vite build to handle these files. Let me address both possibilities since the use case is uncommon:

If You Meant .otf Font Files

If you're actually dealing with .otf (OpenType Font) files, you can configure Sanity Studio v3 to handle them by customizing the Vite configuration. Create or modify a sanity.cli.js file in your Studio root:

// sanity.cli.js
import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  api: {
    projectId: 'your-project-id',
    dataset: 'your-dataset'
  },
  vite: {
    assetsInclude: ['**/*.otf', '**/*.woff', '**/*.woff2', '**/*.ttf']
  }
})

The assetsInclude option tells Vite to treat these file extensions as static assets that should be copied to the build output.

If You Actually Need .odt Document Files

If your library truly needs to import .odt files (document format), you'd use a similar approach:

// sanity.cli.js
import {defineCliConfig} from 'sanity/cli'

export default defineCliConfig({
  api: {
    projectId: 'your-project-id',
    dataset: 'your-dataset'
  },
  vite: {
    assetsInclude: ['**/*.odt'],
    build: {
      assetsInlineLimit: 0 // Prevent inlining of these files
    }
  }
})

However, I'd strongly recommend reconsidering your architecture—importing document files directly into client-side code is unusual and may cause performance issues. Consider instead:

  1. Uploading to Sanity's asset pipeline and referencing them via URLs
  2. Storing in a public/static folder and referencing via public URLs
  3. Converting the data to a format more suitable for JavaScript (JSON, etc.)

Important Note About Studio v3

Since Sanity Studio v3 uses Vite (not webpack), the old webpack-based configuration methods you may have seen referenced (part:@sanity/base/webpack-config) from Studio v2 no longer work. All build customization now goes through the Vite configuration in sanity.cli.js.

The configuration file approach I've shown above is the current way to extend the build tooling in Studio v3.

Could you clarify what your library is actually trying to do with these files? If it's font files, the .otf solution above should work. If it's actual document files, you may need a different architectural approach altogether.

Show original thread
6 replies
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?
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).
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} />
      </>
   )
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} />
      </>
   )
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! 🙂
Very welcome
user F
!

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?