Шрифты

Шрифты складываются в src/client/fonts. Каждый шрифт кладется в свою директорию, а варианты начертания - в поддиректории. В директории шрифта должен лежать index.css, подключающий все варианты начертаний шрифта. Этот файл надо заинжектить в index.ts в директории шрифтов, а также нужно добавить имя шрифта в enum FontFamily. Также нужно указать доступные варианты начертания шрифта и строку для теста загруженности шрифта (например, если шрифт доступен только для кириллицы, это TestString.RUSSIAN). Также нужно указать fallback-шрифты.

Шрифт считается загруженным, когда становятся доступны все его варианты начертания, указанные в index.ts в директории шрифтов.

Пример расположения файлов:

• fonts
  • Bitter
    • Bitter-Regular
      • Bitter-Regular.otf
      • Bitter-Regular.woff
    • Bitter-Bold
      • Bitter-Bold.otf
      • Bitter-Bold.woff
    • index.css
  • index.ts Пример css:

 @font-face {
 font-family: 'Circe';
 font-style: normal;
 font-weight: normal;
 /* В данном случае других типов нет, но вообще надо подключать все */
 src: url('./Circe-Regular/CRC55.otf') format('truetype');
}
@font-face {
 font-family: 'Circe';
 font-style: normal;
 font-weight: bold;
 src: url('./Circe-Bold/Circe-Bold.otf') format('truetype');
}

В компонентах шрифт используется следующим образом:

import styled from 'styled-components';
import { FontFamily } from '../../../fonts';
import { withCommonState } from '../../common/lib/withCommonState';
import { fontFamily } from '../../common/styles';
// Любой компонент, использующий шрифт, должен быть обернут в withCommonState.
const Header = withCommonState(styled.h1`
 ${fontFamily(FontFamily.CIRCE)};
`);

Пока шрифты загружаются, отображаются fallback-шрифты (FOIT prevention).