Quick Example

Fonts Usage

ตัวอย่าง import และการใช้งานแบบสั้นสำหรับหน้า `fonts`

Code

                <script lang="ts">
 import { Fonts } from 'sv5ui-plus';
</script>

<Fonts
 families={[
  { name: 'Inter', variable: '--font-sans-family', weights: [400, 500, 600, 700] },
  { name: 'JetBrains Mono', variable: '--font-mono-family', weights: [400, 500, 700] },
  {
   provider: 'local',
   name: 'Sarabun',
   variable: '--font-sarabun-family',
   sources: [{ src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 }]
  }
 ]}
/>

Fonts

A unified font provider for SV5UI Plus that supports both Google Fonts and local font files through the same `fonts.families` API.

Default Preset

If you render `` without props or custom config, SV5UI Plus uses the built-in preset below. The current default display is `swap` with preconnect set to `true`.

Default Preset

                <Fonts />

--font-sans-family

Inter

Weights: 400, 500, 600, 700

Utility: `font-sans`

--font-heading-family

Inter

Weights: 400, 500, 600, 700

Utility: `font-heading`

--font-mono-family

JetBrains Mono

Weights: 400, 500, 700

Utility: `font-mono`

The preset is sourced from `defaultFontFamilies` and currently includes `3` families.

Google Provider

Poppins heading

Inter body copy is mapped to `--font-sans-family`.

const provider = 'google';

Local Provider

                <Fonts
 families={[
  {
   provider: 'local',
   name: 'Sarabun',
   variable: '--font-sarabun-family',
   sources: [
    { src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 },
    { src: '/fonts/Sarabun-Bold.woff2', format: 'woff2', weight: 700 }
   ]
  }
 ]}
/>

Put your font files under `static/fonts/*`, map them to a CSS variable, then use utility classes like `font-sarabun` across the project.

Local Font Setup

Step 1

Add your files under `static/fonts/*` so they are served from the app root.

Step 2

Map each file with `provider: "local"` and `sources` entries for the weights/styles you need.

Step 3

Bind the family to a CSS variable such as `--font-sarabun-family`.

Step 4

Use the mapped variable through utility classes like `font-sarabun`, `font-heading`, or `font-mono`.

Local Font Setup

                <script lang="ts">
 import 'sv5ui-plus/theme.css';
 import { Fonts } from 'sv5ui-plus';

 let { children } = $props();
</script>

<Fonts
 families={[
  {
   provider: 'local',
   name: 'Sarabun',
   variable: '--font-sarabun-family',
   sources: [
    { src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 },
    { src: '/fonts/Sarabun-Medium.woff2', format: 'woff2', weight: 500 },
    { src: '/fonts/Sarabun-Bold.woff2', format: 'woff2', weight: 700 }
   ]
  }
 ]}
/>

<main class="font-sarabun">
 {@render children?.()}
</main>

Mixed Providers

                <Fonts
 families={[
  { name: 'Inter', variable: '--font-sans-family', weights: [400, 500, 600, 700] },
  { name: 'Poppins', variable: '--font-heading-family', weights: [600, 700] },
  {
   provider: 'local',
   name: 'Sarabun',
   variable: '--font-sarabun-family',
   sources: [{ src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 }]
  }
 ]}
/>

Mix Google fonts for global typography with local assets for brand or language-specific families in the same provider.

Using Global Config

defineSV5UIPlusConfig()

                import { defineSV5UIPlusConfig } from 'sv5ui-plus';

defineSV5UIPlusConfig({
 fonts: {
  families: [
   { name: 'Inter', variable: '--font-sans-family', weights: [400, 500, 600, 700] },
   { name: 'Poppins', variable: '--font-heading-family', weights: [600, 700] },
   {
    provider: 'local',
    name: 'Sarabun',
    variable: '--font-sarabun-family',
    sources: [
     { src: '/fonts/Sarabun-Regular.woff2', format: 'woff2', weight: 400 },
     { src: '/fonts/Sarabun-Bold.woff2', format: 'woff2', weight: 700 }
    ]
   }
  ]
 }
});

+layout.svelte

                <script lang="ts">
 import 'sv5ui-plus/theme.css';
 import { Fonts } from 'sv5ui-plus';
 import { ModeWatcher } from 'mode-watcher';

 let { children } = $props();
</script>

<Fonts />
<ModeWatcher />
{@render children?.()}

Disable Defaults

                import { defineSV5UIPlusConfig } from 'sv5ui-plus';

defineSV5UIPlusConfig({
 fonts: false
});

Set `fonts: false` when you want to fully manage font loading yourself.

API Reference

Fonts Options

families

FontDefinition[]

Complete list of families managed by the provider.

display

'auto' | 'block' | 'swap' | 'fallback' | 'optional'

Controls `font-display` for Google requests and local `@font-face` output.

preconnect

boolean

Adds preconnect links for Google Fonts when enabled.

Font Definition

provider

'google' | 'local'

Selects whether the family loads from Google Fonts or local assets.

name

string

Font family name used in the request or `@font-face` declaration.

variable

`--${string}`

CSS custom property that stores the generated font-family stack.

fallback

string

Optional fallback stack appended after the primary font family.

weights

number[]

Google-only list of weights to request.

styles

('normal' | 'italic')[]

Google-only styles to request.

sources

LocalFontSource[]

Local-only file definitions used to build `@font-face` rules.

Local Font Source

src

string

Public URL to the local font file, for example `/fonts/Sarabun-Regular.woff2`.

format

Optional format hint used in `@font-face`.

weight

number | `${number} ${number}`

Single weight or variable font range.

style

'normal' | 'italic'

Font style for the source entry.

unicodeRange

string

Optional unicode-range for partial subsets.