Fontsource provides a straightforward process for installing fonts into your web application. This guide will walk you through the installation steps.
Before proceeding with the installation, ensure that you are using a bundler, such as Vite or Webpack, to handle importing CSS into your final bundle. Please refer to the Fontsource Guides section to see detailed instructions for your preferred framework.
If your chosen font supports variable fonts, Fontsource highly recommends using them, especially when working with multiple weights, as it helps reduce bundle sizes. To learn more about using variable fonts, refer to the dedicated Variable Fonts guide.
To install a font from Fontsource, follow the steps below:
1. Choose a Package
Select the font package you wish to install. You can find a list of available fonts in the Fontsource directory. Each font package corresponds to a specific font.
2. Install the Package
Use your preferred package manager to install the font package. For example, to install the Open Sans font, run the following command:
Note: Alternatively, you can download the font files yourself in each directory listing.
3. Import the Font
In your application’s entry file, page, or site component, import the font package using the package name. For example, to import Open Sans into index.jsx, add the following code:
4. Weights and Styles
If you only need specific font weights or styles, you can import them individually to reduce the payload size. Fontsource allows you to select weights and styles precisely. To import a specific weight or style, use the corresponding imports. For example:
Note: Each font package will provide information on the supported weights and styles in the directory listing or package README.
Once the font is imported, you can reference it in your CSS stylesheets, CSS Modules, or CSS-in-JS. Use the font family name associated with the font package you installed. For example:
That’s it! You have successfully installed and imported a font from Fontsource into your web application.