Typography
This guide explains how to configure and update typography settings in your KimiStores application.
Typography Configuration Files
The global typography settings are configured in the following files:
- •
src/theme/theme-config.ts- Main theme configuration including font families - •
src/theme/core/typography.ts- Detailed typography variant settings
How to Change Fonts
1. Install Font Package
First, install the font package using yarn. Here we use Inter Variable as an example:
yarn add @fontsource-variable/inter
2. Update Files
You need to modify these files to apply your new font:
src/global.css - Import the font
@import '@fontsource-variable/inter';
src/theme/theme-config.ts - Update font family
fontFamily: {
primary: 'Inter Variable, sans-serif',
secondary: '...', // Optional secondary font
},
Pro Tip: Typography Variants
You can also customize individual typography variants (h1, h2, body1, etc.) in src/theme/core/typography.ts to change font sizes, weights, line heights, and letter spacing.