Changing Fonts

body_font_family

font style of body

Example

"body_font_family": "Inter",
heading_font_family

font style of heading

Example

"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 two different ways:

  • You can change the themes with the property name and its value here by declaring property name and its values in database->seeder
    ->AppSettingTableSeeder.php file.
    -This is the example of AppSettingTableSeeder.php file. 
    • 'value' => '{
	"saveLocal": "",
	"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}
	}
}',
    After making changes in seeder it is necessary to run php artisan migrate:fresh --seed to save changes in database.
  • You can change page-appearance from your database for that open table with name app_setting.In the cloumn name value change the value for variable theme_font_size for theme font, body_font_family for body font and heading_font_family for heading font.
Manual

You can change the fonts with a single action.

  • By adding some classes in html tag. Example is given below.
    • 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