/* ── fonts ────────────────────────────────────────────────────────────────── Served from this site, not Google: no second and third host to connect to before text can render. The brand faces, Lilita One (headings) and Baloo 2 (text), have no Cyrillic at all - not on Google Fonts, not in the app's own files. Russian text used to fall back to the system font, so a heading read as a thin Segoe UI word next to a heavy Lilita "BB VPN". Each brand face is therefore paired with a Cyrillic font, split by unicode-range: the browser picks per character, and downloads the Cyrillic file only for a page that has Cyrillic on it. 'BB Display' Latin, digits Lilita One Cyrillic, №, ₽ Rubik ExtraBold 'BB Text' Latin, digits Baloo 2 ₽, ← → Baloo 2 'BB Text Cyrillic' Cyrillic, № Nunito (x-height matched) bb.css names both text families: --font-text: 'BB Text', 'BB Text Cyrillic', ... Rubik 800 is the closest Cyrillic to Lilita (cap height 700 vs 704 units); Nunito has Baloo's rounded ends. The ruble sign is cut out of the big latin-ext files into files of about 1 KB. Licences: /assets/fonts/OFL-*.txt (SIL Open Font License 1.1; none of the four reserves a name used here). */ /* BB Display. Declared for weights 400-900 so that bold inside a heading uses the face as drawn instead of a smeared synthetic bold. */ @font-face { font-family: 'BB Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/lilita-one-latin.woff2) format('woff2'); 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: 'BB Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/lilita-one-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'BB Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/rubik-800-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'BB Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/assets/fonts/rubik-800-ruble.woff2) format('woff2'); unicode-range: U+20BD; } /* BB Text: Baloo 2, variable 400-800, drawn at the weight asked for. */ @font-face { font-family: 'BB Text'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/baloo-2-latin.woff2) format('woff2'); 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: 'BB Text'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/baloo-2-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20BC, U+20BE-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'BB Text'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/baloo-2-ruble.woff2) format('woff2'); unicode-range: U+20BD; } @font-face { font-family: 'BB Text'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/baloo-2-arrows.woff2) format('woff2'); unicode-range: U+2190, U+2192; } /* BB Text Cyrillic: Nunito, variable 200-1000, ONE file declared four times. At the same CSS weight Nunito is lighter than Baloo 2: bold Russian read as semibold next to a heavy Latin word in one button ("Войти кодом из Telegram"; canvas ink of о а е р с х against o a e p c x was 0.79 at 600, 0.80 at 700 and 0.82 at 800). Measured in Chromium, Nunito matches Baloo 600 at about wght 750, 700 at about 875 and 800 at about 1000. How the heavier axis values are reached without another download: for a weight that no face's range contains, CSS picks the face with the nearest heavier weight and clamps the variable axis to that face's range. So CSS 600 lands on the 699 face and draws wght 699, 700 on the 799 face (wght 799), 800 on the 950 face (wght 950). Ink ratios then: 400 0.95, 600 0.93, 700 0.91 (caps 1.00), 800 0.96. The file is fetched once for all four rules. This only works as a family of its own. Within 'BB Text' the browser first picks ONE weight group for the whole family, and Baloo's 400-800 group has no Cyrillic, so Russian fell through to the system font. As the next family in --font-text it is asked only for the characters Baloo does not have. */ @font-face { font-family: 'BB Text Cyrillic'; font-style: normal; font-weight: 400 550; font-display: swap; src: url(/assets/fonts/nunito-cyrillic.woff2) format('woff2'); size-adjust: 95%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'BB Text Cyrillic'; font-style: normal; font-weight: 699; font-display: swap; src: url(/assets/fonts/nunito-cyrillic.woff2) format('woff2'); size-adjust: 95%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'BB Text Cyrillic'; font-style: normal; font-weight: 799; font-display: swap; src: url(/assets/fonts/nunito-cyrillic.woff2) format('woff2'); size-adjust: 95%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'BB Text Cyrillic'; font-style: normal; font-weight: 950; font-display: swap; src: url(/assets/fonts/nunito-cyrillic.woff2) format('woff2'); size-adjust: 95%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }