The new font customization feature in the Theme (Style Guide) Panel of CodeDesign.ai lets you instantly switch font styles across your entire webpage or website. Whether you’re refining the tone of a personal portfolio or setting the vibe for a brand site, this update gives you full control over typography without needing to tweak individual elements manually.
Apart from this article, we've put together a video on how to use this new feature.
Getting Started with Font Customization
To begin, generate and save a website on CodeDesign Builder. Once saved, the Publish button will appear in the header—this confirms your site is ready for styling.
Head to the footer and click on the ‘Themes’ tab. This opens the Style Guide Panel on the right sidebar.
On the Themes/Style Guide panel, you'll see multiple pre-designed theme options.
With the new update, each theme may not only brings a unique color scheme but now also includes its own default font style, depending on the type of website generated.
How Font Customization Works
Each theme now supports two main font styles:
Primary Font – used for headings and titles.
Secondary Font – used for body text and paragraphs.
This allows you to effortlessly create a cohesive typographic hierarchy with just a few clicks.
Changing Fonts in a Theme
Select a Theme
Choose a theme (e.g., Playful Dark) from the panel.Update the Primary Font
Click on the Primary Font option. A font selection menu appears. From this menu, select your desired font using the drop-down and selecting the new font will immediately update all headings site-wide.Update the Secondary Font
Similarly, click on Secondary Font to change the text style for paragraphs and general body content. Experiment with over 300+ fonts and select what suits your style
As you make these changes, your entire site updates in real-time—no need to adjust elements one by one.
Font customization in the Theme Panel adds a powerful layer of personalization to your website. Whether you want elegance, boldness, or whimsy, it takes just a few clicks to match your typography to your vision.
If you have any questions, feel free to reach out via our support chat, leave a comment under the video, or connect with our community in the CodeDesign forum.
Happy building!