How to loading custom fonts

Support
2

Hi, to add a custom font to your Netlify project, you can follow these steps:

  1. Include your font files in your project directory (e.g. assets/fonts directory)
  2. In your CSS or SASS files, use the @font-face rule to specify your custom font:
@font-face {
  font-family: '300';
  font-display: fallback;
  src: url('/assets/fonts/NotoSans-Light.woff2') format('woff2');
}
  1. Use the custom font in your CSS by referring to the font-family example:
body {
  font-family: var(--font_300);
}
  1. In your netlify.toml, you can set a caching rule for your font files:
[[headers]]
  for = "/assets/fonts/*"
  [headers.values]
    cache-control = '''
    public,
    max-age=31536000'''

A similar user in the forums mentioned this: