# Remix [#remix]

Remix is a full-stack JavaScript framework for building web applications. Importing fonts depends on the compiler you are using. Below are the steps to import fonts into a Remix project.

## Vite Compiler [#vite-compiler]

To import fonts into a Remix project using the Vite compiler, you can simply import the CSS file directly into your `root.tsx` file.

### 1. Import CSS [#1-import-css]

Modify `root.tsx` to include the following code:

```tsx
import "@fontsource-variable/open-sans/wght.css";
```

> **Note:** You **MUST** include the `.css` extension when importing the file or you will get an error.

### 2. Usage [#2-usage]

You can now use the imported fonts in your Remix.js project.

```css
h1 {
  font-family: "Open Sans Variable", sans-serif;
}
```

## Classic Remix Compiler [#classic-remix-compiler]

With the Classic Remix Compiler, you can leverage the CSS bundler plugin built into the framework.

### 1. Install the plugin [#1-install-the-plugin]

```sh
npm install @remix-run/css-bundle
yarn add @remix-run/css-bundle
pnpm add @remix-run/css-bundle
bun add @remix-run/css-bundle
```

### 2. Configure the plugin [#2-configure-the-plugin]

Modify `root.tsx` to include the following code:

```tsx
import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";

import "@fontsource-variable/open-sans/wght.css";

export const links: LinksFunction = () => {
  return [
    ...(cssBundleHref
      ? [{ rel: "stylesheet", href: cssBundleHref }]
      : []),
    // ...
  ];
};
```

### 3. Usage [#3-usage]

You can now use the imported fonts in your Remix.js project.

```css
h1 {
  font-family: "Open Sans Variable", sans-serif;
}
```

Read the official documentation on the plugin [here](https://remix.run/docs/en/main/guides/styling#css-bundling).