---
title: "Font family and size"
description: "How font family and font size convert between DOCX and Tiptap, including unit conversions and font fallback handling."
canonical_url: "https://tiptap.dev/docs/conversion/content-types/text-and-formatting/font-family-size"
---

# Font family and size

How font family and font size convert between DOCX and Tiptap, including unit conversions and font fallback handling.

Font family and font size are inline text styling attributes that flow through the `textStyle` mark. The same pattern as [text color and highlight](https://tiptap.dev/docs/conversion/content-types/text-and-formatting/text-color-highlight.md): TextStyle is the base, and specific extensions layer on top.

## What you need

- **Extensions:** [`ConvertKit`](https://tiptap.dev/docs/conversion/import/docx/convertkit.md). Its bundled `TextStyleKit` provides `TextStyle`, `Color`, `BackgroundColor`, `FontFamily`, `FontSize`, and `LineHeight` in one extension.
- **Configuration:** None required.

```ts
import { ConvertKit } from '@tiptap-pro/extension-convert-kit'

new Editor({ extensions: [ConvertKit] })
```

> **Don't use the deprecated standalone font-size package:**
>
> Do not install `@tiptap/extension-font-size` separately, and don't pull
> `@tiptap/extension-font-family` and `@tiptap/extension-font-size` à la carte — everything lives
> inside `TextStyleKit`, which ConvertKit registers automatically.

## Support overview

|                | Import                                      | Editor                                                                  | Export                               |
| -------------- | ------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------ |
| Font family    | Supported (`textStyle.fontFamily`)          | Supported (FontFamily)                                                  | Supported (first font only)          |
| Font size      | Supported (`textStyle.fontSize` in px)      | Supported (FontSize)                                                    | Supported (converted to half-points) |
| Letter spacing | Supported (`textStyle.letterSpacing` in px) | Requires extending TextStyle (not bundled in ConvertKit / TextStyleKit) | Not supported                        |

## Import

Import font family and size using the [editor extension](https://tiptap.dev/docs/conversion/import/docx/editor-extension.md) or the [REST API](https://tiptap.dev/docs/conversion/import/docx/rest-api.md). Both produce identical output.

The conversion service reads the `w:ascii` attribute from `<w:rFonts>`, falling back to `w:hAnsi` if `w:ascii` is not present. The raw attribute value is stored as-is in `textStyle.fontFamily` (e.g., `"Courier New"`).

Font size comes from `<w:sz>` in half-points and is converted to pixels:

```
pixels = halfPoints * 0.5 * (96 / 72)
```

The result is rounded to the nearest integer pixel via `Math.round()`. Standard sizes like 12pt (16px), 14pt (19px), and 18pt (24px) convert cleanly. The result is stored as `textStyle.fontSize` (e.g., `"16px"`).

Letter spacing is also extracted from `<w:spacing>` on text runs (converted from twips to pixels) and stored as `textStyle.letterSpacing`. Neither ConvertKit's bundled `TextStyleKit` nor [CSS injection](https://tiptap.dev/docs/conversion/import/docx/css-injection.md) renders this attribute. Letter spacing is the canonical "extracted but not rendered out of the box" case. To make it visible in the editor, extend `TextStyle` with a `letterSpacing` attribute that emits `style="letter-spacing: ..."` in `renderHTML`. The [Styling converted content](https://tiptap.dev/docs/conversion/getting-started/guides/styling-converted-content.md#extending-extensions-for-unsupported-attributes) guide has a copy-paste example. Letter spacing is not preserved on export.

## Editor rendering

[`FontFamily`](https://tiptap.dev/docs/editor/extensions/functionality/fontfamily.md) and [`FontSize`](https://tiptap.dev/docs/editor/extensions/functionality/fontsize.md) both depend on [`TextStyle`](https://tiptap.dev/docs/editor/extensions/marks/text-style.md). All three are bundled inside `TextStyleKit`, which ConvertKit registers automatically:

```bash
npm install @tiptap-pro/extension-convert-kit
```

Font family renders as `style="font-family: ..."` and font size as `style="font-size: ..."` on `<span>` elements. If you disable `ConvertKit.configure({ textStyleKit: false })`, the attributes from import are not recognised by the schema. See the [invalid schema guide](https://tiptap.dev/docs/guides/invalid-schema.md) for how to manage this.

## Export

Export font family and size using the [editor extension](https://tiptap.dev/docs/conversion/export/docx/editor-extension.md) or the [REST API](https://tiptap.dev/docs/conversion/export/docx/rest-api.md). Both handle font family and size identically.

On export, font family values are sanitized: quotes are stripped and only the first font from a comma-separated value is used. Since import produces a single font name, round-tripped values pass through unchanged.

> **Font fallback lists are collapsed:**
>
> DOCX does not support CSS-style font fallback lists. If your editor content contains a manually
> set value like `"Arial, Helvetica, sans-serif"`, the exporter picks the first font name (`Arial`)
> and discards the rest. Values imported from DOCX are already single font names and are not
> affected.

Font size converts back from pixels to half-points:

```
halfPoints = pixels * 1.5
```

Values that were imported from DOCX will produce the same half-point value on export, provided the original half-point value converts to an exact integer pixel. When `Math.round()` alters the pixel value during import (e.g., 14pt becomes 18.67px, rounded to 19px), the exported half-point value will differ from the original (19px exports as 28.5 half-points instead of the original 28). Non-numeric font size values (if any) are skipped with a console warning.