🆎Change Typography
Manage the theme Typography in one shot.
Change Default Fonts
For Change Font family - Go to config.ts
// Config.ts
const config: ConfigProps = {
sidebarDrawer: true,
customizerDrawer: false,
miniSidebar: false,
isHorizontalLayout: false,
actTheme: 'light',
fontTheme: 'Inter-var', // you can change it from here 1. Roboto 2. Inter 3. Poppins
inputBg: false,
themeContrast: false,
boxed: false,
isRtl: false
};
Change In Typography
For Change Typography - Go to resources/styles/_variables.scss
$typography: (
"h1": (
"size": 2.375rem, // you can update here for font size changes
"weight": 600,
"line-height": 1.21,
"font-family": inherit,
),
"h2": (
"size": 1.875rem,
"weight": 600,
"line-height": 1.27,
"font-family": inherit,
),
"h3": (
"size": 1.5rem,
"weight": 600,
"line-height": 1.33,
"font-family": inherit,
),
"h4": (
"size": 1.25rem,
"weight": 600,
"line-height": 1.4,
"font-family": inherit,
),
"h5": (
"size": 1rem,
"weight": 600,
"line-height": 1.5,
"font-family": inherit,
),
"h6": (
"size": 0.875rem,
"weight": 400,
"line-height": 1.57,
"font-family": inherit,
),
"subtitle-1": (
"size": 0.875rem,
"weight": 600,
"line-height": 1.57,
"font-family": inherit,
),
"subtitle-2": (
"size": 0.75rem,
"weight": 500,
"line-height": 1.66,
"font-family": inherit,
),
"body-1": (
"size": 0.875rem,
"weight": 400,
"letter-spacing": 0,
"line-height": 1.57,
"font-family": inherit,
),
"body-2": (
"size": 0.75rem,
"weight": 400,
"line-height": 1.66,
"font-family": inherit,
),
"button": (
"size": 0.875rem,
"weight": 500,
"font-family": inherit,
"text-transform": capitalize,
),
"caption": (
"size": 0.75rem,
"weight": 400,
"letter-spacing": 0,
"font-family": inherit,
),
"overline": (
"size": 0.75rem,
"weight": 400,
"font-family": inherit,
"line-height": 1.67,
"letter-spacing": 0,
"text-transform": uppercase,
)
)
Last updated