/* * Google Sans Flex, the TRISTOPIC face, in the three registers TRISTOPIC uses: * * Kartel Grotesk the full variable range (wght 1–1000, wdth 25–151), set per element * Kartel Mono pinned 600 @ 76 %: every label, narrow and heavy, no rule has to name it * Kartel Tile pinned 500 @ 75 %: the corner labels baked into the sphere atlas * * A face declared at one weight/stretch is instanced there whatever the element * asks for, which is also how canvas text (which cannot ask for a width) gets it. * * Greek. The Google Sans Flex files carry Latin only, so Greek (ΥΦΧΨΩ, Greek * names and addresses) falls through, by unicode-range under the SAME family * names, to one of two faces: * - Google Sans, where type runs at its natural width (text, up to 105 %): * the same design as the Latin, letter for letter; * - TikTok Sans with the house Y, where type is stretched or condensed * (titles, the menu's words and brand names at 124 %, the labels at * 75–76 %): Google Sans has no width axis and stops at weight 700. TikTok * Sans's capitals keep the even, round proportions of Google Sans Flex as * they widen; its width axis is remapped in the file so 124 % draws TikTok's * 134, the width that matches, and the label faces are drawn at their * matching widths. Its Υ (also Ύ Ϋ) is Google Sans Flex's own Y, built into * the file with TikTok's spacing and kerning, so ΥΦΧΨΩ stays one word * (tools/build-greek-font.py). Roboto Flex (uneven widths) and Inter (no * width axis) were tried first. * size-adjust brings TikTok's capitals to Google Sans Flex's height (0.716 vs * 0.705 of the em). * A browser picks a group of faces by width and weight first and only then * looks at the script, so every width range lists the Latin files again beside * its Greek face: each group covers both scripts, and Greek never drops to a * system font. The Latin files are fetched once whichever group asks for them. */ /* ---- Kartel Grotesk, natural widths: Greek in Google Sans ---- */ @font-face { font-family: 'Kartel Grotesk'; src: url(fonts/gsflex-latin.woff2) format('woff2'); font-weight: 1 1000; font-stretch: 25% 105%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Kartel Grotesk'; src: url(fonts/gsflex-latin-ext.woff2) format('woff2'); font-weight: 1 1000; font-stretch: 25% 105%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Kartel Grotesk'; src: url(fonts/google-sans-greek.woff2) format('woff2'); font-weight: 1 1000; font-stretch: 25% 105%; font-style: normal; font-display: swap; unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* ---- Kartel Grotesk, stretched (titles, menu words, names): Greek in TikTok Sans ---- */ @font-face { font-family: 'Kartel Grotesk'; src: url(fonts/gsflex-latin.woff2) format('woff2'); font-weight: 1 1000; font-stretch: 105.1% 151%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Kartel Grotesk'; src: url(fonts/gsflex-latin-ext.woff2) format('woff2'); font-weight: 1 1000; font-stretch: 105.1% 151%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Kartel Grotesk'; src: url(fonts/tiktok-greek-wide.woff2) format('woff2'); font-weight: 1 1000; font-stretch: 105.1% 151%; font-style: normal; size-adjust: 101.6%; font-display: swap; unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* ---- Kartel Mono: the furniture register, condensed: Greek in TikTok Sans ---- */ @font-face { font-family: 'Kartel Mono'; src: url(fonts/gsflex-latin.woff2) format('woff2'); font-weight: 600; font-stretch: 76%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Kartel Mono'; src: url(fonts/gsflex-latin-ext.woff2) format('woff2'); font-weight: 600; font-stretch: 76%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Kartel Mono'; src: url(fonts/tiktok-greek-mono.woff2) format('woff2'); font-weight: 600; font-stretch: 76%; font-style: normal; size-adjust: 101.6%; font-display: swap; unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; } /* ---- Kartel Tile: the sphere's corner labels, condensed: Greek in TikTok Sans ---- */ @font-face { font-family: 'Kartel Tile'; src: url(fonts/gsflex-latin.woff2) format('woff2'); font-weight: 500; font-stretch: 75%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Kartel Tile'; src: url(fonts/gsflex-latin-ext.woff2) format('woff2'); font-weight: 500; font-stretch: 75%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Kartel Tile'; src: url(fonts/tiktok-greek-tile.woff2) format('woff2'); font-weight: 500; font-stretch: 75%; font-style: normal; size-adjust: 101.6%; font-display: swap; unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }