Why aren't @font-face fonts loading in Sanity Studio custom branding CSS?

I understand the frustration with custom fonts not loading in Studio. The issue is that Sanity Studio v3 doesn't have a built-in theme.fonts configuration option in the config file.

For custom fonts in Studio v3, you need to load them through custom CSS injected via a plugin. Here's what's likely happening and how to fix it:

The Solution: Custom CSS Plugin

You'll need to create a plugin that injects your CSS (including @font-face declarations) into the Studio. Here's the approach:

1. Create a plugin file (e.g., plugins/customStyles.ts):

import {definePlugin} from 'sanity'

export const customStyles = definePlugin({
  name: 'custom-styles',
  studio: {
    components: {
      layout: (props) => {
        // Inject your styles
        if (typeof document !== 'undefined') {
          const styleId = 'custom-studio-styles'
          if (!document.getElementById(styleId)) {
            const style = document.createElement('style')
            style.id = styleId
            style.textContent = `
              @font-face {
                font-family: 'YourCustomFont';
                src: url('/static/fonts/your-font.woff2') format('woff2');
                font-weight: normal;
                font-style: normal;
              }
              
              /* Apply to Studio UI */
              body, .sanity-root {
                font-family: 'YourCustomFont', sans-serif !important;
              }
            `
            document.head.appendChild(style)
          }
        }
        return props.renderDefault(props)
      }
    }
  }
})

2. Add the plugin to your config:

import {defineConfig} from 'sanity'
import {customStyles} from './plugins/customStyles'

export default defineConfig({
  // ... other config
  plugins: [customStyles()]
})

Why @font-face Might Not Be Working

The most common issues are:

1. Font file paths are wrong - Make sure your font files are in your public or static folder and the paths in your @font-face declarations are correct
2. CSS isn't being injected - Studio v3 doesn't automatically load custom CSS files; you need a plugin to inject them
3. Specificity issues - Studio's default styles might be overriding yours; use !important if needed

Alternative: Use Web Fonts

If you're using Google Fonts or another web font service, you can import them in your plugin:

style.textContent = `
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
  
  body, .sanity-root {
    font-family: 'Inter', sans-serif !important;
  }
`

What About buildLegacyTheme?

The official Studio theming approach using buildLegacyTheme is primarily for color palette customization, not fonts. The Themer tool can help you visualize color schemes, but for custom fonts, you'll need the CSS injection approach described above.

Make sure your font files are properly served and the paths in your @font-face declarations match where they're actually located in your project structure.