Шрифты

Шрифты складываются в src/client/modules/common/lib/fonts. Каждый шрифт кладется в свою директорию, а варианты начертания - в поддиректории. В директории шрифта должен лежать index.ts, подключающий все варианты начертаний шрифта.

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

• fonts
  • Bitter
    • Bitter-Regular
      • Bitter-Regular.ttf
      • ...
    • Bitter-Bold
      • Bitter-Bold.ttf
      • ...
    • ...
    • index.ts
  • index.ts
  • ...

Пример index.ts:

import { css } from 'styled-components';
import BitterBoldTtf from './Bitter-Bold/Bitter-Bold.ttf';
import BitterItalicTtf from './Bitter-Italic/Bitter-Italic.ttf';
import BitterRegularTtf from './Bitter-Regular/Bitter-Regular.ttf';
export const bitter = css`
 @font-face {
 font-family: 'Bitter';
 font-style: normal;
 font-weight: normal;
 src: url(${BitterRegularTtf}) format('truetype');
 }

 @font-face {
 font-family: 'Bitter';
 font-style: normal;
 font-weight: bold;
 src: url(${BitterBoldTtf}) format('truetype');
 }

 @font-face {
 font-family: 'Bitter';
 font-style: italic;
 font-weight: normal;
 src: url(${BitterItalicTtf}) format('truetype');
 }
`;

Вся настройка шрифта производится в файле src/client/modules/common/lib/fonts/fontFamilyConfig.ts:

• импорт index.ts и его инжект в глобальные стили;
• добавление шрифта в enum FontFamily;
• конфигурация шрифта в fontFamilyConfig:
  • варианты начертания;
  • строка для теста загруженности (должна соответствовать языку шрифта);
  • стэк fallback-шрифтов.

Состояние загруженности шрифтов хранится в redux и дает возможность среагировать на загрузку шрифта (например, пересчитать размеры элемента).

Глобальный шрифт настраивается в src/client/modules/common/components/IsomorphicApp/ExternalAndGlobalStyles.ts:

const globalCss = css`
 body {
 ${fontFamily(FontFamily.BITTER)};
 }
`;

Скорее всего, это редкая ситуация.

В компонентах шрифт используется аналогично:

import styled from 'styled-components';
import { FontFamily, fontFamily } from '../../../../fonts';
const Header = styled.h1`
 ${fontFamily(FontFamily.BITTER)};
`;