Add Custom Font in Hyvä Theme: A Step-by-Step Guide

March 17, 2025

Category: Hyva

Upgrade Your Store’s Aesthetics with Custom Font in Hyvä

Adding a custom font to your Hyvä theme can enhance the visual appeal of your Magento store. Follow the steps below to integrate the fonts seamlessly.

Step 1: Download and Add Your Custom Font

Place your custom font files ( .woff2 ) in the web/fonts directory of your Hyvä theme.

Here following path:-

app/design/frontend/Vendor_Name/Theme_Name/web/fonts/

Step 2: Configure @font-face in CSS

Navigate to the typography.css file located at:

app/design/frontend/Vendor_Name/Theme_Name/web/tailwind/components/typography.css

Add the following CSS code:

@font-face {
   font-family: 'DancingScript';
   src: url('../fonts/Dancing_Script/DancingScript-Regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}


@font-face {
   font-family: Teko;
   src: url('../fonts/Dancing_Script/DancingScript-Bold.woff2') format('woff2');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

You can add more font weights using the above structure.

Step 3: Configure Tailwind CSS

Locate and edit the tailwind.config.js file in your custom theme at:

app/design/frontend/Vendor_Name/Theme_Name/web/tailwind/tailwind.config.js

Add your custom fonts in the extend section under theme:

theme: {
   extend: {
       fontFamily: {
           sans: ["'DancingScript'", "sans-serif"],
       },
   }
},

Step 4: Generate Tailwind CSS

Navigate to the theme's Tailwind directory:

app/design/frontend/Vendor_Name/Theme_Name/web/tailwind/

Run the following commands in your terminal:

npm install
npm run build-prod

Step 5: Clear the Magento Cache

Finally, flush the Magento cache to apply changes:

php bin/magento cache: flush

By following these steps, you can successfully add a custom fonts to your Hyvä theme, enhancing the typography and visual aesthetics of your store. Which will help you to create unique brand idnetity and improving user experience.