Step 1:

Go To _variables.scss (assets/scss/_variables.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in _variables.scss i.e (root:-assets/scss/_variables.scss)

Example:

Before : @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

After : @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

Step 3:

And add the Your Selected font-family in _custom.scss(assets/scss/bootstrap/_custom.scss)

Example:

													body {
														margin: 0;
														font-family: 'Poppins', sans-serif;
														font-size: 0.81568rem;
														font-weight: 400;
														line-height: 1.5;
														color: #{$default-color};
														text-align: start;
														background-color: #{$background} ;
													}
	

Go To "assets/images/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

open custom-switcher.js path:(rootFolder\src\App.tsx)file and remove comments for html.setAttribute("data-width" , "boxed") to enable layout-boxed style

//Boxed styles
if (!localStorage.getItem("zemboxed")) {
// html.setAttribute("data-width" , "boxed") // for boxed style
}

open custom-switcher.js path:(rootFolder\src\App.tsx) file and remove comments for html.setAttribute("data-position" , "scrollable") to enable scrollable-layout style

//Scrollabel styles
if (!localStorage.getItem("zemscrollable")) {
	// html.setAttribute("data-position" , "scrollable") // for scrollable style
}

open custom-switcher.js path:(rootFolder\src\App.tsx) file and remove comments for html.setAttribute('data-theme-color', 'default') and any data-theme-color to enable Theme style

// Theme Color Styles
if (!localStorage.getItem("zemthemecolors")) {
		// html.setAttribute('data-theme-color', 'default');
		// html.setAttribute('data-theme-color', 'light');
		// html.setAttribute('data-theme-color', 'dark');
		// html.setAttribute('data-theme-color', 'glassy');
} 

open custom-switcher.js path:(rootFolder\src\App.tsx) file and remove comments for html.setAttribute('data-menuimg', 'bg-img1') and any data-menuimg to enable Menu Image

// Menu Image Styles
if (!localStorage.getItem("zemmenubgimg")) {
		// html.setAttribute('data-menuimg', 'bg-img1');
		// html.setAttribute('data-menuimg', 'bg-img2');
		// html.setAttribute('data-menuimg', 'bg-img3');
		// html.setAttribute('data-menuimg', 'bg-img4');
} 

open custom-switcher.js path:(rootFolder\src\App.tsx) file and remove comments for html.setAttribute("data-layout" , "vertical") and any data-vertical-style to enable Verticalmenu style

//Menu Layout
if (!localStorage.getItem("zemlayout")) {
	// html.setAttribute("data-layout" , "vertical") // for Vertical layout
	// html.setAttribute("data-layout" , "horizontal") // for horizontal layout
}
//Verticalmenu Layout Styles
if (!localStorage.getItem("zemverticalstyles")) {
	// html.setAttribute("data-vertical-style" , "default") // for Vertical default style
	// html.setAttribute("data-vertical-style" , "closed") // for Vertical closed style
	// html.setAttribute("data-vertical-style" , "icontext") // for Vertical icontext style
	// html.setAttribute("data-vertical-style" , "overlay") // for Vertical overlay style
	// html.setAttribute("data-vertical-style" , "hover") // for Vertical hover style
	// html.setAttribute("data-vertical-style" , "hover1") // for Vertical hover1 style
	// html.setAttribute("data-vertical-style" , "doublemenu") // for Vertical doublemenu style
}

open custom-switcher.js path:(rootFolder\src\App.tsx) file and remove comments for html.setAttribute("data-layout" , "horizontal") andany data-hor-style to enable Horizontal layout style

//Menu Layout
if (!localStorage.getItem("zemlayout")) {
	// html.setAttribute("data-layout" , "vertical") // for Vertical layout
	// html.setAttribute("data-layout" , "horizontal") // for horizontal layout
}

//horizontalmenu Layout Styles
if (!localStorage.getItem("zemlayout") === "horizontal") {
	// html.setAttribute("data-hor-style" , "hor-click") // for horizontal click style
	// html.setAttribute("data-hor-style" , "hor-hover") // for horizontal hover style
}

Note:-when horizontal layout is in active all the data-vertical-style will not be in active

open custom-switcher.js path:(rootFolder\src\App.tsx) file and remove comments for html.setAttribute("data-logo" , "centerlogo")to enable Horizontal centerlogo style

//Centerlogo For Horizontal
if (!localStorage	.getItem("zemcenterlogo")) {
// html.setAttribute("data-logo" , "centerlogo") // for Horizontal Centerlogo
}

Note:-when horizontal layout is in active then only the centerlogo is applicable.