Import

Include the following line in the root layout of your project to import the font:

CSS

Include the CSS in your project by adding the following line to your project:

Note:Using Material Icons on your website with Fontsource requires additional steps. Please refer to the Material Icons documentation for more information.

Note: Advanced usage is recommended for users who explicitly need to control their @font-face declarations and is only compatible with Vite-based frameworks or similar.

Subsets

Weights

Display

Formats

Copy CSS

Import this into your global CSS file. Your bundler will automatically rewrite the URL into a useable asset:

Then include the following CSS in your project:

Import

Include the following line in the root layout of your project to import the font:

CSS

Include the CSS in your project by adding the following line to your project:

Note:Using Material Icons on your website with Fontsource requires additional steps. Please refer to the Material Icons documentation for more information.

Note: Advanced usage is recommended for users who explicitly need to control their @font-face declarations and is only compatible with Vite-based frameworks or similar.

Subsets

Weights

Display

Formats

Copy CSS

Import this into your global CSS file. Your bundler will automatically rewrite the URL into a useable asset:

Then include the following CSS in your project: