Шрифты

Шрифты складываются в 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: 'Bitter';
    font-style: normal;
    font-weight: normal;
    /* В данном случае других типов нет, но вообще надо подключать все */
    src: url('./Bitter-Regular/Bitter-Regular.otf') format('truetype');
}

@font-face {
    font-family: 'Bitter';
    font-style: normal;
    font-weight: bold;
    src: url('./Bitter-Bold/Bitter-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).