Documentation

Vue

Changing Fonts

File name:- /src/app/store/setting/state.ts
This are in string.
  1. body_font_family
    - for font style of body 
    "body_font_family": "Inter",
  2. heading_font_family
    - for font style of heading 
    "heading_font_family": "Inter",

There are two ways you can change the setting of your fonts:

With the use of live customizer
You can work on fonts using Live Customizer in three different ways:
  1. You can change the font-size and font-family with the property name and its value here by declaring property name and its values in gulp.config.json file.
    - This is the example of gulp.config.json file.
    "options":{
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting":{
        "app_name": { "value" : "Hope UI" },
        "theme_font_size": {"value": "theme-fs-md"},
        "body_font_family": {"value" : null},
        "heading_font_family": {"value" : null}
    }
},
  2. Go to the live customizer and click on the 'Copy Config' button available at the top-right to copy the json file from the setting panel. Paste the copied code in the IQSetting(setting_options) at the setting-init.js file.
    - Before
    let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting(setting_options);
    - After
    let setting_options = document.querySelector('meta[name="setting_options"]')
setting_options = JSON.parse(setting_options.getAttribute('content'))
const setting = window.IQSetting = new IQSetting({
    "saveLocal": "sessionStorage",
    "storeKey": "huisetting",
    "setting": {
        "app_name": {"value": "Hope UI"},
        "theme_font_size": {"value": "theme-fs-md"},
        "body_font_family": {"value" : null},
        "heading_font_family": {"value" : null}
    }
});
  3. You can change the font by adding property name and its values in the <meta> tag given in <head> section.
    - This is the example of <meta> data 
    <head>
    <meta name="setting_options"
    content="{
        "saveLocal":"sessionStorage",
        "storeKey":"huisetting",
        "setting":{
            "app_name":{"value":"Hope UI"},
            "theme_font_size": {"value": "theme-fs-md"},
            "body_font_family": {"value" : null},
            "heading_font_family": {"value" : null}
        }
    }>
</head>
Manual
You can change the fonts with a single action.
  1. By adding some classes in html tag. Example is given below.

    2. Font Size

    If you wish to change the font size, you can follow the below action.

    For example you have to set font size as small then you will have to add theme-fs-sm class at html tag.

    - For font size as small 
    <html .... class="theme-fs-sm">
    .......
</html>
    - For font size as medium 
    <html .... class="theme-fs-md">
    .......
</html>
    - For font size as large 
    <html .... class="theme-fs-lg">
    .......
</html>

    Font Family

    If you wish to change the font family, you can follow the below action.

    For example you have to set font family of body as inter and font-family of heading as inter then you will have to add --bs-heading-font-family:"Inter", sans-serif; --bs-body-font-family:Inter; style at html tag.

    - For font family of body and font family of heading as inter 
    <html .... style="--bs-heading-font-family:"Inter", sans-serif; --bs-body-font-family:Inter;">
    .......
</html>
Previous Next