/* Metis Core UI Guideline — Self-hosted fonts - All fonts are stored locally in: UI-guideline/fonts/files// - Source font files were provided as TTF under the SIL Open Font License (OFL 1.1) and converted to WOFF2 for web delivery. - Licenses and readme files are stored in: UI-guideline/fonts/licenses// Default font: - Nunito (see tokens.css: --font-body) Optional overrides: Set (or another key) to switch the base UI font. Note: This file only defines @font-face and font selection hooks. It does not change colors/themes. */ /* ---------- Font selection hooks (override tokens) ---------- */ html[data-font="nunito"] { --font-body: "Nunito", var(--font-body-base); } html[data-font="montserrat"] { --font-body: "Montserrat", var(--font-body-base); } html[data-font="roboto"] { --font-body: "Roboto", var(--font-body-base); } html[data-font="sansation"] { --font-body: "Sansation", var(--font-body-base); } html[data-font="zalando"] { --font-body: "Zalando Sans SemiExpanded", var(--font-body-base); } html[data-font="red-rose"] { --font-display: "Red Rose", var(--font-display); } html[data-font="ovo"] { --font-display: "Ovo", var(--font-display); } html[data-font="google-sans-code"] { --font-mono: "Google Sans Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* ---------- Nunito (default UI font) ---------- */ @font-face { font-family: "Nunito"; src: url("./files/nunito/Nunito-VariableFont_wght.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; } @font-face { font-family: "Nunito"; src: url("./files/nunito/Nunito-Italic-VariableFont_wght.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; } /* ---------- Montserrat ---------- */ @font-face { font-family: "Montserrat"; src: url("./files/montserrat/Montserrat-VariableFont_wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("./files/montserrat/Montserrat-Italic-VariableFont_wght.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } /* ---------- Roboto (variable width/weight) ---------- */ @font-face { font-family: "Roboto"; src: url("./files/roboto/Roboto-VariableFont_wdth,wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url("./files/roboto/Roboto-Italic-VariableFont_wdth,wght.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } /* ---------- Zalando Sans SemiExpanded ---------- */ @font-face { font-family: "Zalando Sans SemiExpanded"; src: url("./files/zalando_sans_semiexpanded/ZalandoSansSemiExpanded-VariableFont_wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Zalando Sans SemiExpanded"; src: url("./files/zalando_sans_semiexpanded/ZalandoSansSemiExpanded-Italic-VariableFont_wght.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } /* ---------- Sansation (static weights) ---------- */ @font-face { font-family: "Sansation"; src: url("./files/sansation/Sansation-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Sansation"; src: url("./files/sansation/Sansation-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Sansation"; src: url("./files/sansation/Sansation-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Sansation"; src: url("./files/sansation/Sansation-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Sansation"; src: url("./files/sansation/Sansation-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Sansation"; src: url("./files/sansation/Sansation-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* ---------- Google Sans Code (mono) ---------- */ @font-face { font-family: "Google Sans Code"; src: url("./files/google_sans_code/GoogleSansCode-VariableFont_wght.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Google Sans Code"; src: url("./files/google_sans_code/GoogleSansCode-Italic-VariableFont_wght.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } /* ---------- Red Rose (display) ---------- */ @font-face { font-family: "Red Rose"; src: url("./files/red_rose/RedRose-VariableFont_wght.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } /* ---------- Ovo (display serif) ---------- */ @font-face { font-family: "Ovo"; src: url("./files/ovo/Ovo-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }