GitHub
Core Concepts

Fonts

vue-pdf includes built-in support for standard PDF fonts (Helvetica, Times-Roman, Courier). You can also register custom fonts using the Font utility.

Built-in Fonts

These fonts are always available without registration:

  • Helvetica — Regular, Bold, Oblique, BoldOblique
  • Times-Roman — Regular, Bold, Italic, BoldItalic
  • Courier — Regular, Bold, Oblique, BoldOblique
vue
<template>
  <Document>
    <Page>
      <Text :style="{ fontFamily: 'Helvetica', fontSize: 18 }">Helvetica Regular</Text>
      <Text :style="{ fontFamily: 'Helvetica', fontWeight: 'bold', fontSize: 18 }">Helvetica Bold</Text>
      <Text :style="{ fontFamily: 'Times-Roman', fontSize: 18 }">Times-Roman</Text>
    </Page>
  </Document>
</template>

Registering Custom Fonts

Use Font.register() to add custom fonts. Call this before rendering any documents:

fonts.ts
import { Font } from '@vuepdf/renderer'

// Single font
Font.register({
  family: 'Inter',
  src: '/fonts/Inter-Regular.ttf',
})

// Multiple weights
Font.register({
  family: 'Inter',
  fonts: [
    { src: '/fonts/Inter-Regular.ttf', fontWeight: 400 },
    { src: '/fonts/Inter-Bold.ttf', fontWeight: 700 },
    { src: '/fonts/Inter-Italic.ttf', fontWeight: 400, fontStyle: 'italic' },
  ],
})

Font Options

PropTypeDefaultDescription
family*string—Font family name used in style.fontFamily.
srcstring—Path or URL to the font file (TTF or OTF).
fonts{ src: string; fontWeight?: number; fontStyle?: string }[]—Array of font files with weight/style metadata.
fontWeightnumber—Font weight for this specific file.
fontStyle'normal' | 'italic'—Font style for this specific file.
hyphenationCallback(word: string) => string[]—Custom hyphenation function.

Emoji & Fallback Fonts

Register emoji sources for rendering emoji characters:

ts
Font.register({
  family: 'Inter',
  src: '/fonts/Inter-Regular.ttf',
})

// Register emoji source
Font.registerEmojiSource({
  url: 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple@14.0.0/img/apple/64/{code}.png',
  format: 'png',
})

Font Loading (Server)

On the server, fonts can be loaded from the filesystem or a URL. Use Font.registerHyphenationCallback to customize the hyphenation behavior:

ts
Font.registerHyphenationCallback((word) => {
  // Custom hyphenation logic
  const parts = word.split('')
  const result = []
  for (let i = 1; i < parts.length; i++) {
    result.push(parts.slice(0, i).join('') + '-')
  }
  return result
})
Font files must be in TTF or OTF format. WOFF/WOFF2 are not supported. On the browser, fonts must be loaded from a CORS-enabled URL.