To use Fontsource with a Qwik City project, it is suggested to use the
Once you install the Fontsource package of your choice, you can import the chosen font variant into
Note: Alternatively, you can import the font in index.tsx or any other component file and it should have the same effect.
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
Scoped Component Fonts
To use Qwik’s scoped CSS functionality, you can use the font declaration in the
useStylesScoped$() hook from Qwik.
You can opt out of this scoped behavior by using Qwik’s
By default, Qwik works well with Fontsource out of the box. This even includes lazy-loadable references to component styles with