## Demo: font-loading ### FontLoading.svelte ```svelte

Fontsource package example

Add @fontsource/jetbrains-mono and import it.

The quick brown fox jumps over the lazy dog. 1234567890

Standalone .woff2 example

Drop a .woff2 next to your component and reference it from a tiny @font-face CSS file:

{`@font-face {
  font-family: 'Lobster';
  src: url('./lobster.woff2') format('woff2');
}`}

Import the CSS (import './lobster.css'). Bun's CSS bundler inlines the .woff2 as a base64 data URI in the bundled CSS.

The quick brown fox jumps over the lazy dog. 1234567890

``` ### lobster.css ```ts @font-face { font-family: 'Lobster'; font-style: normal; font-weight: 400; font-display: swap; src: url('./lobster.woff2') format('woff2'); } ``` ### routes.ts ```ts import { Mochi } from 'mochi-framework'; import type { MochiRouteValue } from 'mochi-framework'; export const routes: Record = { '/demos/font-loading': Mochi.page('./src/demos/font-loading/FontLoading.svelte'), }; ``` ### index.ts ```ts import { Mochi, logger } from 'mochi-framework'; await Mochi.serve({ port: 3333, development: process.env.MODE === 'development', routes: { '/': Mochi.page('./src/Home.svelte'), }, }); logger.info('Server running at http://localhost:3333'); ```