Настройка шрифтов в теме

Библиотека MUI (Material-UI) предоставляет гибкую систему для кастомизации тем оформления приложения. Одним из ключевых элементов визуальной идентичности является шрифт, который используется в компонентах. Настройка шрифтов через тему позволяет единообразно контролировать типографику, размеры текста, межстрочный интервал и стили для различных элементов интерфейса.

Основы типографики в MUI

Типографика в MUI управляется объектом typography, который является частью глобальной темы. Основные свойства, доступные для настройки:

  • fontFamily – задает семейство шрифтов для всего приложения. Можно указать несколько шрифтов через запятую для резервного использования.
  • fontSize – базовый размер шрифта в пикселях (используется для масштабирования других элементов текста).
  • fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold – стандартные веса шрифтов для разных типов текста.
  • lineHeight – межстрочный интервал для текста.
  • letterSpacing – расстояние между буквами.
  • htmlFontSize – размер шрифта корневого элемента <html>, который используется как базовая единица rem.

Создание кастомной темы с шрифтами

Пример создания темы с измененным шрифтом и весами:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    fontSize: 14,
    fontWeightLight: 300,
    fontWeightRegular: 400,
    fontWeightMedium: 500,
    fontWeightBold: 700,
    h1: {
      fontSize: '2.5rem',
      fontWeight: 700,
      lineHeight: 1.2,
      letterSpacing: '-0.01562em',
    },
    h2: {
      fontSize: '2rem',
      fontWeight: 700,
      lineHeight: 1.3,
      letterSpacing: '-0.00833em',
    },
    body1: {
      fontSize: '1rem',
      fontWeight: 400,
      lineHeight: 1.5,
      letterSpacing: '0.00938em',
    },
    button: {
      fontSize: '0.875rem',
      fontWeight: 500,
      textTransform: 'uppercase',
    },
  },
});

В этом примере:

  • fontFamily задает основное семейство шрифтов.
  • Индивидуальные стили h1, h2, body1, button переопределяют стандартные размеры, веса и межстрочный интервал для соответствующих элементов.

Поддержка нескольких семейств шрифтов

MUI позволяет указать несколько семейств шрифтов в fontFamily, разделяя их запятыми. Браузер будет использовать первый доступный шрифт из списка:

fontFamily: '"Inter", "Roboto", "Arial", sans-serif'

Такой подход обеспечивает корректное отображение текста на всех устройствах даже при отсутствии некоторых шрифтов.

Использование кастомных шрифтов

Чтобы использовать шрифт, которого нет в стандартных системных наборах, необходимо:

  1. Подключить шрифт через CSS или через Google Fonts.
  2. Указать имя шрифта в fontFamily темы:
import '@fontsource/inter/400.css';
import '@fontsource/inter/700.css';

const theme = createTheme({
  typography: {
    fontFamily: '"Inter", "Roboto", sans-serif',
    fontWeightRegular: 400,
    fontWeightBold: 700,
  },
});

Подключение через @fontsource позволяет использовать разные веса и стили шрифта, а также интегрируется с системой сборки JavaScript.

Модификация типографики для отдельных компонентов

MUI предоставляет возможность локальной настройки шрифтов через sx или пропсы компонентов. Пример:

import Typography from '@mui/material/Typography';

<Typography variant="h2" sx={{ fontFamily: 'Arial', fontWeight: 600 }}>
  Заголовок
</Typography>

Это позволяет отклоняться от глобальной темы для конкретного элемента без изменения всей темы.

Использование responsiveFontSizes

MUI поддерживает адаптивные размеры шрифтов через функцию responsiveFontSizes. Она автоматически масштабирует текст под разные размеры экранов:

import { createTheme, responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme({
  typography: {
    fontFamily: '"Roboto", sans-serif',
  },
});

theme = responsiveFontSizes(theme);

После применения responsiveFontSizes заголовки и тело текста будут увеличиваться или уменьшаться в зависимости от ширины экрана, сохраняя визуальную гармонию интерфейса.

Итоговые рекомендации

  • Основной шрифт задается через typography.fontFamily.
  • Индивидуальные веса и размеры текста лучше определять через h1–h6, body1–body2, button, caption и другие стандартные варианты.
  • Для адаптивного интерфейса использовать responsiveFontSizes.
  • Кастомные шрифты подключать через CSS или @fontsource и добавлять в fontFamily.
  • Локальная настройка шрифтов для отдельных компонентов возможна через sx или пропсы Typography.

Эти подходы позволяют создать консистентную и гибкую типографику во всём приложении с минимальными усилиями и полным контролем над стилем текста.

Оглавление