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.
