local-font

A wrapper of the experimental queryLocalFonts API.

Features

• Compatible with font-list API: Same getFonts() function signature
• Query detailed font information (family, fullName, postscriptName, style)
• Access raw font file bytes as Blob
• Detect monospace fonts
• Parse font styles to numeric weights

Browser compatibility

Quick Start

import { getFonts, isSupportQueryLocalFonts, checkLocalFontPermission } from 'local-font'

if (isSupportQueryLocalFonts() && (await checkLocalFontPermission()).state === 'granted') {
  // Get font family names (API compatible with font-list)
  const fonts = await getFonts()
  // ==> ['Arial', '"Times New Roman"', 'Helvetica', ...]

  // Get fonts without quotes
  const fontsNoQuotes = await getFonts({ disableQuoting: true })
  // ==> ['Arial', 'Times New Roman', 'Helvetica', ...]
}

API

getFonts(options?)

Returns a list of font family names available on the system.

Parameters:

• options (optional): Configuration object
  • disableQuoting (boolean): If true, font names with spaces won't be wrapped in quotes. Default: true
  • postscriptNames (string[]): Filter fonts by PostScript names
  • transformLabel (function): Transform font labels

Returns: Promise<string[]>

[!note] Quote is optional for font names in CSS font-family property

getFontItems(options?)

Get parsed font items for select menu options.

const items = await getFontItems()
// ==> [{ label: 'Arial', value: 'Arial', style: ['Regular', 'Bold'] }, ...]

Utility Functions

import {
  checkLocalFontPermission,
  fontWeightLabels,
  isMonospace,
  isSupportQueryLocalFonts,
  parseFontStyleToWeight,
  queryFontList,
  queryTargetFontBlob
} from 'local-font'

// Check API support
isSupportQueryLocalFonts() // boolean

// Check permission
await checkLocalFontPermission() // PermissionStatus

// Get detailed font data
const data = await queryFontList() // FontData[]

// Get font blob by PostScript name
await queryTargetFontBlob('ComicSansMS') // Blob | null

// Check if font is monospace
const ctx = new OffscreenCanvas(50, 50).getContext('2d')!
isMonospace(ctx, 'Courier New') // true or false

// Parse font style to weight
parseFontStyleToWeight('Bold Italic') // 700
fontWeightLabels[700] // 'Bold'

TypeScript Support

In tsconfig.json:

{
  "compilerOptions": {
    "types": [
      "local-font/types"
    ]
  }
}

License

MIT