Qwik

To use Fontsource with a Qwik City project, it is suggested to use the /routes/layout.tsx file.

1. Installation

Once you install the Fontsource package of your choice, you can import the chosen font variant into routes/layout.tsx:

import { component$ } from "@builder.io/qwik";
import "@fontsource-variable/open-sans/wght.css";

export default component$(() => {
  return (
    <>
      <Header />
      <main>
        <Slot />
      </main>
      <Footer />
    </>
  );
});

Note: Alternatively, you can import the font in index.tsx or any other component file and it should have the same effect.

2. Usage

You can now use the imported fonts in your Qwik City project. Here’s an example of the Open Sans Variable font being applied to an h1 selector.

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

Scoped Component Fonts

To use Qwik’s scoped CSS functionality, you can use the font declaration in the useStylesScoped$() hook from Qwik.

import { component$, useStylesScoped$ } from "@builder.io/qwik";
import "@fontsource-variable/open-sans";

export default component$(() => {
  useStylesScoped$(`
      .heading {
        font-family: "Open Sans Variable", sans-serif;
        font-weight: 500;
      }
    `);
  return (
    <>
        <h1 class="heading">
          Scoped heading using Open Sans with 500 font weight!
        </h1>
    </>
  );
});

You can opt out of this scoped behavior by using Qwik’s :global() selector.

3. Extensibility

By default, Qwik works well with Fontsource out of the box. This even includes lazy-loadable references to component styles with useStyles$().