Vue

Fontsource packages work with Vue’s standard Vite setup. The font files remain self-hosted and are emitted with the rest of your application assets.

1. Install the font

npm install @fontsource-variable/open-sans

2. Import it from the application entry point

// 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");

Importing from main.ts makes the font available to the whole application. Import it from an individual component or route instead when you want the font in a separate bundle.

3. Apply the font

/* src/style.css */
body {
  margin: 0;
  font-family: "Open Sans Variable", sans-serif;
}

h1 {
  font-weight: 700;
}

css

If you use a static package, import only the weights and styles you need:

import "@fontsource/open-sans/400.css";
import "@fontsource/open-sans/700.css";