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

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

Modify root.tsx to include the following code:

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

tsx

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

2. Usage

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

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

css

Classic Remix Compiler

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

1. Install the plugin

npm install @remix-run/css-bundle

2. Configure the plugin

Modify root.tsx to include the following code:

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 }]
      : []),
    // ...
  ];
};

tsx

3. Usage

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

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

css

Read the official documentation on the plugin here.