# Vue [#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 [#1-install-the-font]

```sh
npm install @fontsource-variable/open-sans
yarn add @fontsource-variable/open-sans
pnpm add @fontsource-variable/open-sans
bun add @fontsource-variable/open-sans
```

## 2. Import it from the application entry point [#2-import-it-from-the-application-entry-point]

```ts
// 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 [#3-apply-the-font]

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

h1 {
  font-weight: 700;
}
```

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

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