Fonts

Manage web font loading with a provider abstraction layer.

The fonts plugin handles web font loading through configurable providers. It generates CSS imports and @font-face rules, and registers a font-<token> shortcut for every configured token. Built-in providers: Google Fonts ('google'), Bunny Fonts ('bunny'), Fontshare ('fontshare'), Coollabs ('coollabs'), and 'none' for fonts that need no loading; custom providers can be added via defineFontsProvider().

pnpm

pnpm add -D @pikacss/plugin-fonts

npm

npm install -D @pikacss/plugin-fonts

yarn

yarn add -D @pikacss/plugin-fonts

import { defineEngineConfig } from '@pikacss/core'
import { fonts } from '@pikacss/plugin-fonts'

export default defineEngineConfig({
  plugins: [fonts()],
  fonts: {
    provider: 'google',
    fonts: {
      // Shorthand string: 'Name' or 'Name:weight1,weight2'
      sans: 'Inter:400,500,600,700',
      // Object form for italic or per-font provider overrides
      mono: { name: 'Fira Code', weights: [400, 500], provider: 'bunny' },
    },
  },
})

Each key under fonts (and families) is a token: the plugin registers a --pk-font-<token> CSS variable holding the resolved font-family stack and a font-<token> shortcut that applies it. Use the shortcut in your styles:

// Expands to { fontFamily: 'var(--pk-font-sans)' }
pika('font-sans')

// Or combine with other styles
pika('font-mono', { fontSize: '14px' })

Tokens named sans, serif, or mono under fonts automatically get sensible fallback stacks (e.g. sans falls back to ui-sans-serif, system-ui, sans-serif).

Config

Property	Description
provider	Default font provider used for entries that do not specify their own. Built-in options: 'google', 'bunny', 'fontshare', 'coollabs', 'none'. Default: 'google'.
fonts	Font families grouped by shortcut token. Each entry is a 'Name' / 'Name:400,700' shorthand string or a { name, weights, italic, provider, providerOptions } object; entries are loaded through their provider.
families	Raw font-family CSS stacks grouped by shortcut token. No provider loading is performed — use this for fonts that are already available.
imports	Additional stylesheet URLs, each wrapped in an @import url("...") rule and injected before provider-generated imports.
faces	Explicit @font-face rule definitions for self-hosted or custom fonts.
display	font-display value applied to provider-generated imports. Default: 'swap'.
providers	Custom font provider definitions created with defineFontsProvider(), keyed by provider name.
providerOptions	Per-provider configuration options, keyed by provider name.

See API Reference — Plugin Fonts for full type signatures and defaults.

Next

• Reset — CSS reset stylesheets.
• Typography — semantic prose styling.