From cb0a0a0bf73f207e53633fb69b29d7eed1deff19 Mon Sep 17 00:00:00 2001 From: Daniele T Date: Thu, 28 Dec 2023 12:54:53 +0100 Subject: [PATCH] fix: fonts --- src/assets/css/2-design-tokens/_fonts.scss | 226 +++++++++++---------- src/layouts/base.njk | 2 +- 2 files changed, 119 insertions(+), 109 deletions(-) diff --git a/src/assets/css/2-design-tokens/_fonts.scss b/src/assets/css/2-design-tokens/_fonts.scss index 16c282d1..653fce0a 100644 --- a/src/assets/css/2-design-tokens/_fonts.scss +++ b/src/assets/css/2-design-tokens/_fonts.scss @@ -17,153 +17,163 @@ Use like this in your CSS: @font-face { font-family: 'Inter Subset'; font-display: swap; - src: url("/assets/fonts/inter/Inter-Regular-subset.woff2") format("woff2"); - unicode-range: U+21-80,U+91-94,U+BF-D6,U+D8-F6,U+F8-122; -} - -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 100; - font-display: swap; - src: url("/assets/fonts/inter/Inter-Thin.woff2?v=3.19") format("woff2"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 100; - font-display: swap; - src: url("/assets/fonts/inter/Inter-ThinItalic.woff2?v=3.19") format("woff2"); -} - -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 200; - font-display: swap; - src: url("/assets/fonts/inter/Inter-ExtraLight.woff2?v=3.19") format("woff2"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 200; - font-display: swap; - src: url("/assets/fonts/inter/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"); -} - -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 300; - font-display: swap; - src: url("/assets/fonts/inter/Inter-Light.woff2?v=3.19") format("woff2"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 300; - font-display: swap; - src: url("/assets/fonts/inter/Inter-LightItalic.woff2?v=3.19") format("woff2"); -} - -@font-face { - font-family: 'Inter'; - font-style: normal; + src: url("/assets/fonts/inter/Inter-Regular-subset.woff2") format("woff2"), url("/assets/fonts/inter/Inter-Regular-subset.woff") formt("woff"); + unicode-range: U+21-80, U+91-94, U+BF-D6, U+D8-F6, U+F8-122; +} + +// @font-face { +// font-family: 'Inter'; +// font-style: normal; +// font-weight: 100; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-Thin.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-Thin.woff2?v=3.19") format("woff"); +// } + +// @font-face { +// font-family: 'Inter'; +// font-style: italic; +// font-weight: 100; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-ThinItalic.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-ThinItalic.woff?v=3.19") format("woff"); +// } + +// @font-face { +// font-family: 'Inter'; +// font-style: normal; +// font-weight: 200; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-ExtraLight.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-ExtraLight.woff?v=3.19") format("woff"); +// } + +// @font-face { +// font-family: 'Inter'; +// font-style: italic; +// font-weight: 200; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-ExtraLightItalic.woff?v=3.19") format("woff"); +// } + +// @font-face { +// font-family: 'Inter'; +// font-style: normal; +// font-weight: 300; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-Light.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-Light.woff?v=3.19") format("woff"); +// } + +// @font-face { +// font-family: 'Inter'; +// font-style: italic; +// font-weight: 300; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-LightItalic.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-LightItalic.woff?v=3.19") format("woff"); +// } + +@font-face { + font-family: 'Inter'; + font-style: normal; font-weight: 400; font-display: swap; - src: url("/assets/fonts/inter/Inter-Regular.woff2?v=3.19") format("woff2"); + src: local(''), url("/assets/fonts/inter/Inter-Regular.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-Regular.woff?v=3.19") format("woff"); } + @font-face { font-family: 'Inter'; - font-style: italic; + font-style: italic; font-weight: 400; font-display: swap; - src: url("/assets/fonts/inter/Inter-Italic.woff2?v=3.19") format("woff2"); + src: local(''), url("/assets/fonts/inter/Inter-Italic.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-Italic.woff?v=3.19") format("woff"); } @font-face { font-family: 'Inter'; - font-style: normal; + font-style: normal; font-weight: 500; font-display: swap; - src: url("/assets/fonts/inter/Inter-Medium.woff2?v=3.19") format("woff2"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 500; - font-display: swap; - src: url("/assets/fonts/inter/Inter-MediumItalic.woff2?v=3.19") format("woff2"); + src: local(''), url("/assets/fonts/inter/Inter-Medium.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-Medium.woff?v=3.19") format("woff"); } -@font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 600; - font-display: swap; - src: url("/assets/fonts/inter/Inter-SemiBold.woff2?v=3.19") format("woff2"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; - font-weight: 600; - font-display: swap; - src: url("/assets/fonts/inter/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"); -} +// @font-face { +// font-family: 'Inter'; +// font-style: italic; +// font-weight: 500; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-MediumItalic.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-MediumItalic.woff?v=3.19") format("woff"); +// } + +// @font-face { +// font-family: 'Inter'; +// font-style: normal; +// font-weight: 600; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-SemiBold.woff?v=3.19") format("woff"); +// } + +// @font-face { +// font-family: 'Inter'; +// font-style: italic; +// font-weight: 600; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-SemiBoldItalic.woff?v=3.19") format("woff"); +// } @font-face { font-family: 'Inter'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: url("/assets/fonts/inter/Inter-Bold.woff2?v=3.19") format("woff2"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; + font-style: normal; font-weight: 700; font-display: swap; - src: url("/assets/fonts/inter/Inter-BoldItalic.woff2?v=3.19") format("woff2"); + src: local(''), url("/assets/fonts/inter/Inter-Bold.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-Bold.woff?v=3.19") format("woff"); } +// @font-face { +// font-family: 'Inter'; +// font-style: italic; +// font-weight: 700; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-BoldItalic.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-BoldItalic.woff?v=3.19") format("woff"); +// } + @font-face { font-family: 'Inter'; - font-style: normal; - font-weight: 800; - font-display: swap; - src: url("/assets/fonts/inter/Inter-ExtraBold.woff2?v=3.19") format("woff2"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; + font-style: normal; font-weight: 800; font-display: swap; - src: url("/assets/fonts/inter/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"); + src: local(''), url("/assets/fonts/inter/Inter-ExtraBold.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-ExtraBold.woff?v=3.19") format("woff"); } +// @font-face { +// font-family: 'Inter'; +// font-style: italic; +// font-weight: 800; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-ExtraBoldItalic.woff?v=3.19") format("woff"); +// } + @font-face { font-family: 'Inter'; - font-style: normal; - font-weight: 900; - font-display: swap; - src: url("/assets/fonts/inter/Inter-Black.woff2?v=3.19") format("woff2"); -} -@font-face { - font-family: 'Inter'; - font-style: italic; + font-style: normal; font-weight: 900; font-display: swap; - src: url("/assets/fonts/inter/Inter-BlackItalic.woff2?v=3.19") format("woff2"); + src: local(''), url("/assets/fonts/inter/Inter-Black.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-Black.woff?v=3.19") format("woff"); } +// @font-face { +// font-family: 'Inter'; +// font-style: italic; +// font-weight: 900; +// font-display: swap; +// src: local(''), url("/assets/fonts/inter/Inter-BlackItalic.woff2?v=3.19") format("woff2"), url("/assets/fonts/inter/Inter-BlackItalic.woff?v=3.19") format("woff"); +// } + body { font-family: sans-serif; - font-kerning: normal; + // font-kerning: normal; } + .fonts-loaded-1 body { font-family: 'Inter Subset'; } + .fonts-loaded-2 body { font-family: 'Inter'; -} - +} \ No newline at end of file diff --git a/src/layouts/base.njk b/src/layouts/base.njk index 6a336111..c2b1abcb 100644 --- a/src/layouts/base.njk +++ b/src/layouts/base.njk @@ -31,8 +31,8 @@ Promise.all([ document.fonts.load("400 1em 'Inter'"), + document.fonts.load("400 italic 1em 'Inter'"), document.fonts.load("500 1em 'Inter'"), - document.fonts.load("600 1em 'Inter'"), document.fonts.load("700 1em 'Inter'"), document.fonts.load("900 1em 'Inter'"), ]).then(function () {