Changing Fonts
This are in string.-
body_font_family
- for font style of body"body_font_family": "Inter",
-
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 two different ways:
-
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
Database->Seeds->AppSettingSeeder.php
file.- This is the example ofAppSettingSeeder.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} } }',
php spark migrate:refresh
to save changes in database. -
You can change page-appearance from your database for
that open table with name
app_setting
.In the cloumn namevalue
change the value for variabletheme_font_size
for theme font,body_font_family
for body font andheading_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.
<html .... class="theme-fs-sm">
.......
</html>
<html .... class="theme-fs-md">
.......
</html>
<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.
<html .... style="--bs-heading-font-family:"Inter", sans-serif; --bs-body-font-family:Inter;">
.......
</html>