DOCSEARCHbyAlgolia
Submit Docs

Fontsource

website·Indexed 39 days ago

https://fontsource.org/docs

A collection of open-source fonts available as NPM packages. Documentation covers installation, self-hosting, and integration with frameworks like Next.js, Angular, Vue, SvelteKit, Remix, and Qwik. Includes guides on variable fonts, Sass mixins, preloading, and a REST API for retrieving font IDs, version information, and download statistics.

Tokens
10K
Snippets
64
Records
73
Agent score
71%

What's inside Fontsource

  1. Overview of Fontsource self-hosting advantages

    Fontsource packages open-source fonts into individual NPM packages for self-hosting. This approach provides several benefits over using a CDN like Google Fonts:

    • Performance: Reduces latency by eliminating extra DNS resolution and TCP connections.
    • Version Locking: Prevents unexpected visual changes caused by CDN updates; fonts are managed as NPM dependencies.
    • Privacy: Avoids third-party tracking of font usage.
    • Offline Support: Enables fonts to load without an internet connection, which is critical for Progressive Web Apps (PWAs).
    • Extended Library: Supports open-source fonts beyond the Google Font ecosystem.

  2. Retrieve and filter fonts using the Fontsource API

    The Fonts endpoint returns an array of font objects containing metadata about fonts supported by the Fontsource repository. You can filter the results using query parameters. Multiple queries can be combined using &. For array attributes, use a comma , as a separator, which acts as an AND operator.
    # Get all fonts
curl https://api.fontsource.org/v1/fonts

# Filter for variable fonts that support both latin and latin-ext subsets
curl "https://api.fontsource.org/v1/fonts?subsets=latin,latin-ext&variable=true"

# Filter for specific weights and styles
curl "https://api.fontsource.org/v1/fonts?weights=400,900&styles=normal"

  3. Retrieve detailed information for a specific font using Font ID

    The Font ID endpoint allows you to retrieve comprehensive details about a specific font supported by Fontsource, including its family, subsets, weights, styles, unicode ranges, and direct URLs to font files (woff2, woff, ttf) organized by weight, style, and subset.
    # Example: Get details for the 'Abel' font
curl https://api.fontsource.org/v1/fonts/abel

# Example: Get details for 'Open Sans'
curl https://api.fontsource.org/v1/fonts/open-sans

  4. Load a Fontsource font for a single route in React Router

    To limit a font to a specific route in React Router, you can either import the CSS directly in the route module or use the links function to return a stylesheet link. The links approach requires the root document to render the <Links /> component.
    // Option 1: Direct import in route module
// app/routes/editor.tsx
import "@fontsource/jetbrains-mono/400.css";

export default function Editor() {
  return <code className="editor">const ready = true;</code>;
}
    // Option 2: Using the links function for explicit stylesheet links
import fontCssHref from "@fontsource/jetbrains-mono/400.css?url";

export function links() {
  return [{ rel: "stylesheet", href: fontCssHref }];
}

  5. Use Fontsource fonts in SvelteKit

    Fontsource packages are handled by SvelteKit's Vite build, ensuring font files are self-hosted and versioned. To make a font available globally, import the CSS in the root layout file (src/routes/+layout.svelte). To limit a font to a specific section, import it in that route's local +layout.svelte instead.
    <!-- src/routes/+layout.svelte -->
<script>
  import "@fontsource-variable/inter/wght.css";

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

{@render children()}

<style>
  :global(body) {
    margin: 0;
    font-family: "Inter Variable", sans-serif;
  }
</style>

  6. Use Fontsource fonts in Storybook

    To make a self-hosted font available to every story and docs page in Storybook, import the Fontsource package in the preview configuration file. If a font is only needed for a specific component, you can import the package entry directly within that component's file; Storybook will process it via the configured Vite or Webpack builder.
    # 1. Install the font
npm install @fontsource-variable/inter
    // 2. Import it from the preview configuration (.storybook/preview.ts)
import "@fontsource-variable/inter/wght.css";
import "./preview.css";

export default {
  parameters: {},
};
    /* 3. Apply the font (.storybook/preview.css) */
body {
  font-family: "Inter Variable", sans-serif;
}

  7. Use Fontsource fonts in a Vue project with Vite

    Fontsource packages are compatible with Vue's standard Vite setup. Font files are self-hosted and emitted as application assets. To use a font, install the package, import the CSS in the application entry point (e.g., main.ts) to make it globally available, or import it within a specific component/route for separate bundling. Finally, apply the font family in your CSS.
    # Install the font
npm install @fontsource-variable/open-sans
    // src/main.ts
import { createApp } from "vue";
import "@fontsource-variable/open-sans/wght.css";
import "./style.css";
import App from "./App.vue";

createApp(App).mount("#app");
    /* src/style.css */
body {
  margin: 0;
  font-family: "Open Sans Variable", sans-serif;
}

  8. Update Sass integration for Fontsource V5

    The Sass integration has been completely rewritten. The @include [Font].fontFace mixin is replaced by @include [Font].faces, which allows for specifying subsets, multiple weights, and styles in a single call.
    // Before V5
@include OpenSans.fontFace(
  $weight: 500,
  $display: fallback,
  $fontDir: "~@fontsource/open-sans/files"
);

// After V5
@include OpenSans.faces(
  $subsets: latin,
  $weights: (300, 400, 500, 800),
  $styles: all,
  $directory: "~@fontsource/open-sans/files"
);

  9. Optimize Fontsource bundle sizes

    To reduce bundle size, avoid importing all static weights. Instead, use variable fonts when available or import only the specific weights required for your project.
    // ❌ Avoid importing multiple static weights
import "@fontsource/open-sans/300.css";
import "@fontsource/open-sans/400.css";

// ✅ Use variable fonts for better optimization
import "@fontsource-variable/open-sans";

// ✅ Or import only the specific weights needed
import "@fontsource/open-sans/400.css";

  10. Install and use static fonts from Fontsource

    Use static packages when a variable font is unavailable or when fixed font faces are required. Static imports are granular: each import adds exactly one fixed face. The root import typically provides the default weight (usually 400). To use other weights or italic styles, you must import the specific CSS files. Note that a normal style import does not include the italic variant; both must be imported separately if needed.
    # Installation
npm install @fontsource/open-sans
# or
yarn add @fontsource/open-sans
# or
pnpm add @fontsource/open-sans
# or
bun add @fontsource/open-sans
    // Default weight (usually 400)
import "@fontsource/open-sans";

// Specific weights and styles
import "@fontsource/open-sans/300.css";
import "@fontsource/open-sans/900-italic.css";

// To use both normal and italic for the same weight:
import "@fontsource/open-sans/900.css";
import "@fontsource/open-sans/900-italic.css";

  11. Generate custom font faces using the Faces mixin

    The Faces mixin allows you to generate a customizable CSS file for your fonts by modifying @font-face variables. This is useful for Sass/SCSS projects where you need specific subsets, weights, or styles without importing every available variation.
    @use "pkg:@fontsource-utils/scss" as fontsource;
@use "pkg:@fontsource-variable/recursive/scss" as recursive;

// Example: Generate CSS for Recursive font, latin subset, 500 weight, italic style
@include fontsource.faces(
  $metadata: recursive.$metadata,
  $subsets: latin,
  $weights: 500,
  $styles: italic
);

// Example: Include multiple subsets, weights, and all available styles
@include fontsource.faces(
  $metadata: recursive.$metadata,
  $subsets: (latin, greek),
  $weights: (300, 400, 800),
  $styles: all
);

  12. Install and use Fontsource fonts in Next.js

    Fontsource packages provide versioned control over font files, weights, and styles, serving assets from the same deployment as the application. This is an alternative to next/font for users who want fonts as standard package dependencies or need fonts outside the Google Fonts catalog.
    # Install the font package
npm install @fontsource-variable/open-sans
# or
yarn add @fontsource-variable/open-sans
# or
pnpm add @fontsource-variable/open-sans
# or
bun add @fontsource-variable/open-sans