Able Pro
Vue Laravel
Vue Laravel
  • Documentation
  • Installation
  • Directory Structure
  • ⛱️Theme UI
    • 🎛️Icons
    • 👓Change Logo
    • 🆎Change Typography
    • 🔮Theme Colors
    • ⚙️Theme Settings
    • ⬅️RTL
  • 👩‍💻Development
    • Database Connection
    • Sanctum Integration
    • Sanctum Authentication
    • Frontend API
    • State Management
    • Axios API Calls
    • Routing
  • Perfect Scrollbar
  • Layouts
  • Create a new page
  • Remove Auth
  • Dependencies
  • Roadmap
  • Changelog
Powered by GitBook
On this page
  • Change Default Fonts
  • Change In Typography
  1. Theme UI

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,
        )
    )
PreviousChange LogoNextTheme Colors

Last updated 4 months ago

⛱️
🆎