Fonts

Vy UI does not ship or load a font for you. @vyui/kit stays font-agnostic, and the Vue-Lynx app owns font registration, Tailwind font utilities, and any component-level typography overrides.

1. Load app CSS

Import the app stylesheet from the Vue-Lynx entry file. This is where Tailwind and app-owned font rules live.

import { createApp } from 'vue-lynx'
import { VyUI } from '@vyui/kit'
import App from './App.vue'
import './index.css'

const app = createApp(App)
app.use(VyUI)
app.mount()

2. Define the font

Keep the font-family name stable across whatever mechanism registers it, because Tailwind utilities and theme overrides reference this name by string.

Web / CSS targets

@vyui/kit fully owns this path — plain @font-face in the app stylesheet:

@tailwind base;
@tailwind utilities;

@import '@vyui/kit/style.css';

@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/brand-sans-regular.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/brand-sans-semibold.woff2') format('woff2');
  font-weight: 600;
}

Native Lynx targets

Native font registration is a Lynx/host-platform concern, not something @vyui/kit wraps or ships — there's no @vyui/kit API here, and none of the example apps in this monorepo currently register a native font. What follows is what Lynx itself documents; vyui's only responsibility is the family-name contract at the end.

Lynx exposes two real, documented mechanisms, both outside @vyui/kit:

1. @font-face, native src grammar. The same at-rule, but native reads src differently than a browser: url() for a remote or Base64 font on both platforms, or local() to point at a font already on the device — local(file://absolute/path) on Android, local(font-name) on iOS. Supported formats: TTF/OTF/TTC on Android, TTF/OTF/WOFF/WOFF2 (iOS 10+) on iOS. Native also does not support font-weight / font-style / font-variant inside the block, unlike the web spec. See lynxjs.org/api/css/at-rule/font-face.
2. lynx.addFont(fontFace, callback). A background-thread global for loading a font at runtime, modeled on the Web Font Loading API. The FontFace shape ('font-family', src) ships in @lynx-js/types, already pulled in transitively via @vyui/kit's dependency on @vyui/core:
   src/index.ts

   import type { FontFace } from '@lynx-js/types'
   
   const brandSans: FontFace = {
     'font-family': 'Brand Sans',
     src: 'https://example.com/fonts/brand-sans-regular.ttf',
   }
   
   // `lynx` is a Lynx-runtime global — absent on a plain web/browser target
   // and in tests, so guard before calling.
   if (typeof lynx !== 'undefined') {
     lynx.addFont(brandSans, () => console.log('Brand Sans loaded'))
   }
   

   
   See lynxjs.org/api/lynx-api/lynx/lynx-add-font.

Neither mechanism covers how the font file gets onto the device or installed at the OS level in the first place — bundling a font into the native app and registering it with the platform so local(font-name) (iOS) or an absolute asset path (Android) can resolve it is native-build tooling. Lynx's own docs point at @font-face / addFont without spelling out that packaging step either (see lynxjs.org/guide/styling/text-and-typography), so treat it as a host-app build concern to solve with your platform tooling, not a vyui or Vue-Lynx API gap.

The one thing that is concrete and vyui's to keep straight: whatever font-family string the native side registers under, use that exact string in theme.extend.fontFamily and in component classes/overrides below — Tailwind and Vy UI don't care how the font got there, only that the name matches.

3. Add Tailwind font utilities

Extend the Vue-Lynx Tailwind config. Keep the Lynx preset first and the Vy UI preset second; add fonts under theme.extend.fontFamily.

import type { Config } from 'tailwindcss'
import { createLynxPreset } from '@lynx-js/tailwind-preset'
import vyuiPreset, { VYUI_UI_STATES } from '@vyui/kit/tailwind'

const lynxPreset = createLynxPreset({
  lynxUIPlugins: {
    uiVariants: {
      prefixes: defaults => ({
        ...defaults,
        ui: [...defaults.ui, ...VYUI_UI_STATES],
      }),
    },
  },
})

const config: Config = {
  content: [
    './src/**/*.{vue,js,ts}',
    '../../../packages/kit/src/**/*.{vue,js,ts}',
    '../../../packages/core/src/**/*.{vue,js,ts}',
  ],
  presets: [
    lynxPreset,
    vyuiPreset as Config,
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Brand Sans'],
        display: ['Brand Sans'],
      },
    },
  },
}

export default config

If the app was created with vyui init, import the copied preset from ./src/lib/vyui/vyui-preset.js instead of @vyui/kit/tailwind, matching the generated tailwind.config.ts.

4. Use fonts in app markup

Use Tailwind font utilities on Lynx text nodes. Font family does not reliably cascade across every Lynx target, so put the utility on the text element or on the component slot that renders text.

<text class="font-display text-2xl font-semibold">
  Account settings
</text>

5. Override Vy UI component typography

Use app config when a font should apply to a whole Vy UI component slot. Theme keys are deep-merged into the kit defaults.

app.use(VyUI, {
  ui: {
    button: {
      slots: {
        label: 'font-sans',
      },
    },
    modal: {
      slots: {
        title: 'font-display font-semibold',
      },
    },
  },
})

Related

• Overrides