Theme Font Configuration

Body Font Family

The font family values are of variable type and can be configured as follows:

  • Property: "body_font_family"
  • Value: "Inter"

Example

"body_font_family": { "value" : "Inter" }
Header Font Family
  • Property: "header_font_family"
  • Value: "Inter"

Example

"header_font_family": { "value" : "Inter" }
Font Size

The font size values are of strings type and can be configured as follows:

  • Property: "theme_font_size"
  • Choices: "theme-fs-sm", "theme-fs-md", "theme-fs-lg"

Example

"theme_font_size": { "value" : "theme-fs-md" }

Changing Font Size Settings

There are two ways to change the font size settings:

1. Using the Live Customizer

You can work on font size using the Live Customizer in three different ways:

a. By Declaring Properties in gulp.config.json

Example gulp.config.json:

"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "theme_font_size": { "value": "theme-fs-md" },
        "body_font_family": { "value": "Roboto" },
        "header_font_family": { "value": "Monsterrat" },
    }
},
b. By Copying Configuration from the Live Customizer
  1. Go to the Live Customizer and click the 'Copy Config' button at the top-right to copy the JSON file from the settings panel.
  2. Replace the copied code into the options object in the gulp.config.json file.
Before:
"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "theme_font_size": { "value": "theme-fs-md" },
        "body_font_family": { "value": "Inter" },
        "header_font_family": { "value": "Inter" },
    }
},
After:
"options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting-html",
    "setting":{
        "theme_font_size": { "value": "theme-fs-sm" },
        "body_font_family": { "value": "Roboto" },
        "header_font_family": { "value": "Monsterrat" },
    }
},
c. By Adding Properties in the Tag

Example <meta> tag:

<head>
    <meta name="setting_options"
    content="{
        "saveLocal":"sessionStorage",
        "storeKey":"huisetting-html",
        "setting":{
            "theme_font_size": { "value": "theme-fs-md" },
            "body_font_family": { "value": "Roboto" },
            "body_font_family": { "value": "Monsterrat" },
        }
    }>
</head>
1. Manual Configuration

You can change the theme font with a single action by adding the appropriate class to the <html> tag.

Body Font Family

To change the body font family, set the style attribute in html tag:

    <html style="--bs-body-font-family: Monsterrat;">
    .......
</html>
Header Font Family

To change the header font family, set the style attribute in html tag:

    <html style="--bs-header-font-family: Monsterrat;">
    .......
</html>
Font Size

To change the font size, set the class in html tag:

  • Font Small:
    • <html class="theme-fs-sm">
    .......
</html>
  • Font Medium:
    • <html class="theme-fs-md">
    .......
</html>
  • Font Large:
    • <html class="theme-fs-lg">
    .......
</html>
Previous Next