How to loading custom fonts

[sigfrid]

Hi there,
I have a static site developed with Vite using custom fonts. The structure is shown below

and my netlify.toml file looks like

[build]
  base    = ""
  publish = "dist"
  command = "npm run build"
  [build.processing]
    skip_processing = false
  [build.processing.css]
    bundle = true
    minify = false
  [build.processing.js]
    bundle = true
    minify = false
  [build.processing.html]
    pretty_urls = true
  [build.processing.images]
    compress = true

Styles, JavaScript and images are transferred over cloudfront.net and correctly loaded. However the fonts are not.
In my css file they are still referred with the local path (i.e., @font-face{font-family:onest;font-weight:700; src:url(assets/fonts/onest/OnestBold1602-hint.woff) ....)

How can I load my custom fonts?

Thanks,
Sig

[SamO]

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:

Fonts not loading - break during build?

Hi Support-Team, I am using eleventy (https://www.11ty.dev/) to generate my pages. Just last week, pages started not using the correct fonts anymore. Eleventy configuration This is my .eleventy.js const eleventySass = require("eleventy-sass"); // https://www.npmjs.com/package/eleventy-sass const markdownIt = require('markdown-it') const markdownItAnchor = require('markdown-it-anchor') const markdownItAttrs = require('markdown-it-attrs') const pluginTOC = require('eleventy-plugin-t…

Nuxt 3 assets not availables on the server during the build

Hello, I have some assets on my assets/ folder of my nuxt 3 project. When I call them via a css file using “~” syntax, it works on local by do not work on netlify : url('~/assets/fonts/icomoon.woff2') format('woff2'); I get this during the build : [image] You have to know that the css file who call the woff3 files is loaded on the project by the nuxt.config.js file css:[ "~/assets/css/reset.css", "~/assets/css/variable.css", "~/assets/css/icomoon.css", // him "~…

[sigfrid]

Thanks for the reply. However, adding the headers in my netlify.toml doesn’t seem to fix the issue.

My CSS file looks like

@font-face {
    font-family: 'onest';
    font-weight: bold;
    src: url('assets/fonts/onest/Onest-Bold.woff') format('woff');
}

@font-face {
    font-family: 'onest';
    font-weight: normal;
    src: url('assets/fonts/onest/Onest-Regular.woff') format('woff');
}

and the configuration file

...
[[headers]]
  for = "/assets/fonts/*"
  [headers.values]
    cache-control = '''
    public,
    max-age=31536000'''

Now, in the console I have the following errors

[hrishikesh]

@sigfrid

skip_processing = false

change that to true and remove everything else after that.

also remove this:

@SamO

[[headers]]
  for = "/assets/fonts/*"
  [headers.values]
    cache-control = '''
    public,
    max-age=31536000'''

and lastly,

@sigfrid

assets/fonts/onest/Onest-Bold.woff

change that to /assets/fonts/onest/Onest-Bold.woff

[sigfrid]

Thanks, fonts are now properly loaded.