🆎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: 'DefaultTheme',
    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,
        )
    )