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:
-
Local file: 166.8 kB
_src/assets/fonts/NotoSans-Light.woff2 and _site/assets/fonts/NotoSans-Light.woff2 -
Live file: 131 bytes
https://web-guidelines.example.eu/assets/fonts/NotoSans-Light.woff2 - are they ‘optimized to death?’
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.
,