# Change Typography

## Change Default Fonts

For Change Font family - Go to `config.ts`

<pre class="language-typescript"><code class="lang-typescript">// Config.ts
const config: ConfigProps = {
    Sidebar_drawer: true,
    Customizer_drawer: false,
    mini_sidebar: false,
    setHorizontalLayout: false, 
    actTheme: ThemeMode.Light,
<strong>    fontTheme: 'Inter-var', // you can change it from here 1. Roboto 2. Inter 3. Poppins
</strong>    inputBg: false,
    themeContrast: false,
    boxed: false,
    isRtl: false,
    presetColor: 'Preset 1'
}; 
</code></pre>

## Change In Typography

For Change Typography - Go to  `resources/styles/_variables.scss`

<pre class="language-scss"><code class="lang-scss">$typography: (
        "h1": (
<strong>            "size": 2.375rem, // you can update here for font size changes
</strong>            "weight": 600,
            "line-height": 1.21,
            "font-family": inherit,
        ),
        "h2": (
<strong>            "size": 1.875rem,
</strong>            "weight": 600,
            "line-height": 1.27,
            "font-family": inherit,
        ),
        "h3": (
<strong>            "size": 1.5rem,
</strong>            "weight": 600,
            "line-height": 1.33,
            "font-family": inherit,
        ),
        "h4": (
<strong>            "size": 1.25rem,
</strong>            "weight": 600,
            "line-height": 1.4,
            "font-family": inherit,
        ),
        "h5": (
<strong>            "size": 1rem,
</strong>            "weight": 600,
            "line-height": 1.5,
            "font-family": inherit,
        ),
        "h6": (
<strong>            "size": 0.875rem,
</strong>            "weight": 400,
            "line-height": 1.57,
            "font-family": inherit,
        ),
        "subtitle-1": (
<strong>            "size": 0.875rem,
</strong>            "weight": 600,
            "line-height": 1.57,
            "font-family": inherit,
        ),
        "subtitle-2": (
<strong>            "size": 0.75rem,
</strong>            "weight": 500,
            "line-height": 1.66,
            "font-family": inherit,
        ),
        "body-1": (
<strong>            "size": 0.875rem,
</strong>            "weight": 400,
            "letter-spacing": 0,
            "line-height": 1.57,
            "font-family": inherit,
        ),
        "body-2": (
<strong>            "size": 0.75rem,
</strong>            "weight": 400,
            "line-height": 1.66,
            "font-family": inherit,
        ),
        "button": (
<strong>            "size": 0.875rem,
</strong>            "weight": 500,
            "font-family": inherit,
            "text-transform": capitalize,
        ),
        "caption": (
<strong>            "size": 0.75rem,
</strong>            "weight": 400,
            "letter-spacing": 0,
            "font-family": inherit,
        ),
        "overline": (
<strong>            "size": 0.75rem,
</strong>            "weight": 400,
            "font-family": inherit,
            "line-height": 1.67,
            "letter-spacing": 0,
            "text-transform": uppercase,
        )
    )
</code></pre>