How to change default font for headers in content block?

You can customize the appearance of headers in Portable Text blocks, but it depends on whether you're asking about the editor appearance in Sanity Studio or the rendered output on your website.

For Rendered Output (Your Website)

When you render Portable Text content on your frontend, you have complete control over header styling. You'll use a serializer/component library depending on your framework:

• React: Use @portabletext/react with custom components
• Next.js/other frameworks: Similar serializers exist for each platform

Here's an example with custom header styling:

import {PortableText} from '@portabletext/react'

const components = {
  block: {
    h1: ({children}) => <h1 className="font-serif text-4xl">{children}</h1>,
    h2: ({children}) => <h2 className="font-serif text-3xl">{children}</h2>,
    h3: ({children}) => <h3 className="font-serif text-2xl">{children}</h3>,
  }
}

<PortableText value={content} components={components} />

This gives you full control over fonts, colors, sizes, etc.

For Studio Editor Appearance

If you want to change how headers look in the Sanity Studio editor itself, you can use custom styles in the Portable Text Editor configuration. In your schema definition:

defineField({
  name: 'body',
  type: 'array',
  of: [{
    type: 'block',
    styles: [
      {title: 'Normal', value: 'normal'},
      {title: 'Heading 1', value: 'h1'},
      {title: 'Heading 2', value: 'h2'},
    ]
  }]
})

However, deeply customizing the visual appearance of these styles in the Studio editor requires custom CSS or Studio UI plugins, which is less common since the frontend rendering is where most styling happens.

TL;DR: For your website, use custom serializers with your preferred fonts. For Studio appearance, you're mostly limited to the default styles unless you dive into custom Studio styling.