Шрифты

Добавление шрифта

Шрифты складываются в 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)};
`;

Назад | Наверх | Внутрь | Далее