Skip to content

Commit

Permalink
fix: fonts
Browse files Browse the repository at this point in the history
  • Loading branch information
Fupete committed Dec 28, 2023
1 parent a46ee18 commit cb0a0a0
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 109 deletions.
226 changes: 118 additions & 108 deletions src/assets/css/2-design-tokens/_fonts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}

}
2 changes: 1 addition & 1 deletion src/layouts/base.njk
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down

0 comments on commit cb0a0a0

Please sign in to comment.