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-toc')          // https://github.com/jdsteinbach/eleventy-plugin-toc

module.exports = (eleventyConfig) => {

  eleventyConfig.addPassthroughCopy("_src/assets/css");
  eleventyConfig.addPassthroughCopy("_src/assets/examples");
  eleventyConfig.addPassthroughCopy("_src/assets/fonts");
  eleventyConfig.addPassthroughCopy("_src/assets/graphics");
  eleventyConfig.addPassthroughCopy("_src/assets/scripts");

  eleventyConfig.addPlugin(eleventySass);

  eleventyConfig.addPlugin(pluginTOC);


  // https://www.11ty.dev/docs/languages/markdown/
  // https://dev.to/giulia_chiola/add-html-classes-to-11ty-markdown-content-18ic
  // Markdown-it option
  const markdownItOptions = {
    html: true,
    breaks: true,
    linkify: true,
    typographer: true
  }

  const markdownLib = markdownIt(markdownItOptions).use(markdownItAttrs)

  // Markdown
  eleventyConfig.setLibrary(
    "md",
    markdownIt().use(markdownItAnchor),
    markdownIt(markdownItOptions),
    markdownLib
  )

  return {
    dir: {
      data: "_data",
      includes: "_includes",
      input: "_src",
      output: "_site"
    }
  };

};

CSS/SASS

I am using eleventy-sass for my stylesheets, with the --font_300 CSS variable to point to typefaces. E.g.:

/_includes/stylesheets/typefaces.scss:

:root {
  --font_300: '300';
}
@font-face {
  font-family: '300';
  font-display: fallback;
  src: url('/assets/fonts/NotoSans-Light.woff2') format('woff2');
}

/_includes/stylesheets/layouts.scss

body {
  font-family: var(--font_300);
}

assets/css/style.css

...
@use "../_includes/stylesheets/typefaces";
@use "../_includes/stylesheets/layouts";
...

Netlify toml

In my netlify.toml I have set a caching rule for fonts:

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/assets/fonts/*"
  
  [headers.values]
    # Caches every file that is downloaded from the fonts folder and stores 
    # them in the cache for a year.
    # https://docs.netlify.com/routing/headers/#multi-value-headers
    cache-control = '''
    public,
    max-age=31536000'''

Physical Files

I was trying to find the error, checking for the existence of the font files:

So, there are no 404 errors in the logs or anything. The files exist, but have different sizes.

Interesting:
On another Netlify site I am pointing to my font files in cloudfront, they also do not work.

Browser Consoles

Firefox Developer Edition console tells me downloadable font: rejected by sanitizer (font-family: "300" style:normal weight:400 stretch:100 src index:0) source: https://web-guidelines.example.eu/assets/fonts/NotoSans-Light.woff2.

In Chromium it’s also not loading, but with the explanation OTS parsing error: invalid sfntVersion: 1986359923.

On stackoverflow.com this error was once discussed. It might have something to do with .gitattributes and Git LFS.

Git LFS

I am using Git-LFS to store these font files. In Netlify I’ve configured GIT_LFS_ENABLED' and 'GIT_LFS_FETCH_INCLUDE acoordingly at Netlify App. It worked up until a couple of days ago.


Because the pages show the correct fonts locally and have always worked with the set up, I’ve only just recently saw, that fonts are broken. Now I wonder, what might have caused the issue. To me, it seems the problem might be somewhere on the Netlify side (maybe caused by me).

Can you point me to places where to check? Or suggest what I could do? I am a bit lost at this point.

Thank you for your support.

These are the contents of your font file:

version https://git-lfs.github.com/spec/v1
oid sha256:0df875a5ec27bca617a2c709543863dc4c86600c92953f757edda9c04ba9c151
size 166756

It’s not a valid file - it’s just a Git LFS pointer file.

Could you clone your repo to a new location and see if the font files are correctly downloaded?

Actually, based on this:

there might be an issue with our Git LFS Fetch.

I see. Prepending the build command with git lfs pull solved the issue (temporarily). Do you have any clue, when it will work again? We have some production websites where we are blocked by this.

Hi @dafoobar :wave:t6: ,

Welcome back to the forums and thanks for providing that additional information on the workaround. Unfortunately we aren’t sure when this will be working again, but I hope to have an update soon.

As mentioned in the other thread, a fix for this should be released. Mind trying to redeploy and let us know?