Documentation

Remix

Remix is a full-stack JavaScript framework for building web applications. To import fonts into a Remix project, you can leverage the CSS bundler plugin built into the framework. Follow the steps below to set it up.

1. Install the plugin

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

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.