llms.txt

Font loading

Mochi supports loading fonts from third-party packages like @fontsource or from local font files like .woff2 — all automatically bundled and linked from the page <head>.

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'). Mochi serves the .woff2 as a separate content-hashed file — small fonts (≤4 kB) stay inlined in the bundled CSS as data URIs.

The quick brown fox jumps over the lazy dog. 1234567890

View source on GitHub

<script>
  import '@fontsource/jetbrains-mono';
  import './lobster.css';
  import CodeSnippet from '../../components/CodeSnippet.svelte';
  import { highlightCode } from '../../lib/highlight.server';

  const codeFontFace = await highlightCode(
    `@font-face {
  font-family: 'Lobster';
  src: url('./lobster.woff2') format('woff2');
}`,
    'css',
  );
</script>

<section>
  <h2>Fontsource package example</h2>
  <p>
    Add <code>@fontsource/jetbrains-mono</code> and import it.
  </p>
  <p class="sample sample-mono">The quick brown fox jumps over the lazy dog. 1234567890</p>
</section>

<section>
  <h2>Standalone .woff2 example</h2>
  <p>
    Drop a <code>.woff2</code> next to your component and reference it from a tiny
    <code>@font-face</code> CSS file:
  </p>
  <CodeSnippet html={codeFontFace} />
  <p>
    Import the CSS (<code>import './lobster.css'</code>). Mochi serves the <code>.woff2</code> as a separate content-hashed file — small fonts (≤4&nbsp;kB) stay inlined in the bundled
    CSS as data URIs.
  </p>
  <p class="sample sample-display">The quick brown fox jumps over the lazy dog. 1234567890</p>
</section>

Styles

<style>
  section {
    margin: 2rem 0;
  }
  h2 {
    margin-bottom: 0.5rem;
    font-family: var(--font-serif);
  }
  .sample {
    margin-top: 1rem;
    padding: 1.25rem;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1.5rem;
  }
  .sample-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  }
  .sample-display {
    font-family: 'Lobster', cursive;
    font-size: 2rem;
  }
</style>