/* =========================================================================
   Wortly 2.0 — подключение шрифтов

   Здесь только @font-face. Семейства как токены объявлены в core/tokens.css,
   поэтому файл импортируется первым: шрифт должен быть известен раньше,
   чем на него сошлётся --font-body.
   ========================================================================= */

/* Флаги стран.

   В Unicode флаг — это пара regional indicator symbols: 🇩🇪 = U+1F1E9 U+1F1EA.
   Системный шрифт Windows (Segoe UI Emoji) глифов флагов не содержит вообще,
   поэтому браузер честно рисует сами индикаторы — «DE» вместо флага. На
   Android, iOS и macOS те же байты показываются флагом. Данные в базе при
   этом корректны, лечится только шрифтом.

   unicode-range сужает шрифт до диапазона индикаторов: всё остальное —
   текст, цифры, прочие эмодзи — по-прежнему рисуется системой, и файл
   скачивается только там, где на странице реально есть флаг.

   Источник и лицензия — assets/fonts/README.md. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("../../fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF;

  /* block, а не swap. Со swap флаг в заголовке успел бы отрисоваться
     буквами «DE» и на глазах превратиться в картинку; block оставляет на
     это время пустое место, а шрифт лежит на своём домене и приезжает за
     миллисекунды. Если он не приедет вообще, через ~3 с браузер сам
     вернётся к системному варианту — те же буквы, что и без шрифта. */
  font-display: block;
}