Font Customization Guide

This guide explains how to change the font in your template. By default, the template uses the Poppins font, but you can easily switch to any font available on Fontsource.

---

Steps to Change the Font

Follow these steps to change the default font:

1. Choose a Font from Fontsource

1. Visit Fontsource.
2. Browse or search for a font you want to use.
3. Note the package name of the font (e.g., @fontsource/roboto).

---

2. Install the Font Package

1. Open your terminal and navigate to the root of your project.
2. Run the following command to install the desired font package:

npm install @fontsource/<font-name>

Replace <font-name> with the name of your chosen font (e.g., roboto).

---

3. Import the Font in Your Code

1. Open the src/layouts/MainLayout.astro file.
2. Add/Replace the following import statements at the top of the file:

@import "@fontsource/<font-name>/400.css";
@import "@fontsource/<font-name>/500.css";
@import "@fontsource/<font-name>/600.css";
@import "@fontsource/<font-name>/700.css";

Replace <font-name> with your chosen font name. Adjust the weight values (e.g., 400, 500) as needed.

---

4. Update the Tailwind Configuration

1. Open the tailwind.config.js file.
2. Update the fontFamily property under extend:

fontFamily: {
  sans: ["<Font Name>", ...defaultTheme.fontFamily.sans],
},

Replace <Font Name> with the display name of your chosen font (e.g., Roboto).

---

Additional Notes

• If the font does not render correctly, clear your browser cache and refresh the page.
• You can mix and match multiple fonts by importing them individually and referencing them in your CSS or Tailwind configuration.

---

Need Help?

• Join our Telegram support group here.