Customizing Your Website Theme and Fonts (Lofty AOS)

Introduction

The Style panel in the Lofty CMS lets you control two things that define how your website looks: your theme (colors, titles, and buttons) and your fonts. Both apply site-wide by default, with the option to override settings on individual blocks when you need something different.

Before You Begin

• Theme and font settings apply to your entire website unless you override them on a specific block.
• Individual block settings always take priority over global settings. If you have already customized a block's font, changing the global font will not override it.
• You must click Publish in the top-right corner for any changes to go live on your website.
• Full customization is available on Full SEO and Vanity Domain websites. Agent Websites may have limited access.

Part 1: Customizing Your Website Theme

Your theme controls the colors of most site elements, as well as the style of your titles and buttons.

How to edit your theme

1. Open the Website CMS (from the Lofty top nav, click Content > Websites, then click your site).
2. In the page editor, click Style in the left navigation.
3. Select Theme from the Style menu.
4. Adjust the three theme controls:

Theme Color Sets the primary and hover colors used across most elements on your site (except titles and buttons, which have their own controls). - Primary Color — the default color for most site elements. - Hover Color — the color that appears when a visitor hovers over a clickable element.

Title Style Controls the style of titles across all blocks site-wide.

Button Style Controls the appearance of all buttons across your site.

1. As you make changes, the preview panel on the right updates immediately. Switch between pages to see how the theme looks across different page types.
2. To undo a change before publishing, click the Undo icon in the top bar.
3. When you are ready to go live, click Publish in the top-right corner.

Part 2: Customizing Your Website Fonts

You can set fonts for your entire website or customize them block by block. Lofty provides 28 popular Google fonts plus the ability to upload your own.

How to set your global font

1. In the page editor, click Style, then select Font.
2. Use the primary Font dropdown to select a font that will apply to your entire website.
3. For more specific control, use the three sub-dropdowns to set different fonts for different text types:
   • Titles — headings across your pages and blocks
   • Paragraphs — body text
   • Buttons — button labels
4. Changes preview immediately on the right. Click Publish to apply to your live site.

How to change a font on a specific block

Any block that allows text editing also allows its own font setting, which overrides the global choice.

1. Click on the block you want to edit in the page editor.
2. In the block settings panel, look for the Font option.
3. Select the font you want for that specific block.

Available fonts

Lofty includes 28 Google fonts that can be applied to your website without any additional setup.

How to upload a custom font

If your brand uses a specific font that is not in Lofty's built-in library, you can upload it.

1. In Style > Font, hover over the ? icon and click the link, or open any font dropdown and click Upload Fonts.
2. Before uploading, confirm that you have the rights and permissions to use the font on your website. This is your responsibility to verify — Lofty does not provide font licensing.
3. Confirm the upload prompt to proceed.
4. Once uploaded, your custom font will appear under My Fonts in the font dropdown and in all individual block font pickers.

Custom font limits: - You can have up to 5 custom fonts on your account at the same time. - Custom fonts are available on your website only — they do not apply to other parts of Lofty.

How to delete a custom font

1. Go to Style > Font.
2. Find the font you want to remove under My Fonts.
3. Click Delete and confirm.

Tips

• Match your brand. Choose colors and fonts that match your logo, business cards, and other marketing materials. Consistency builds trust.
• Keep fonts readable. Script or decorative fonts can look great for headings, but make sure body text stays easy to read at small sizes.
• Test on mobile. After making theme or font changes, view your site on a mobile device or use the preview to check how it looks at smaller screen sizes.
• Use per-block fonts sparingly. Setting fonts on individual blocks adds variety, but too many different fonts can make your site look inconsistent.
• Undo before publishing. If you make a change you don't like, click the Undo icon in the top bar to revert it before clicking Publish.

Troubleshooting

I changed the global font but some blocks didn't update. Those blocks have an individual font setting that overrides the global choice. Open each block and clear or update its specific font setting, then the global setting will apply.

I can't find my custom font after uploading. Check that the upload completed successfully — look for the font under My Fonts in the font dropdown. If it doesn't appear, try refreshing the page. If you have already uploaded 5 custom fonts, you'll need to delete one before adding another.

My theme colors look different on the live site than in the preview. Make sure you clicked Publish after making your changes. Also try clearing your browser cache and reloading your live site — cached styles can sometimes show old colors.

The Hover Color doesn't seem to apply everywhere. Hover colors apply to clickable elements. Some elements have their own hardcoded hover styles depending on the block or template. If a specific element isn't responding to the Hover Color setting, it may need to be adjusted at the block level.

Frequently Asked Questions

Can I use any color for my theme? Yes. The Primary Color and Hover Color accept any hex color code, so you can match your exact brand colors.

Do theme and font changes apply to my mobile site too? Yes. Theme colors and fonts apply across all screen sizes. All Lofty websites are responsive, so your design adjustments will carry through to mobile.

Can I have different fonts on different pages? Yes — set a global font for your site and then override it on specific blocks where you want something different.

What happens to my font if I delete a custom upload that's in use? The site will continue to display that font on content where it was already applied, but you won't be able to apply it to new blocks. To fully remove it, you'd need to update each block that uses it first.

Do I need to republish after every small change? Yes. Changes only go live after you click Publish. You can make multiple adjustments before publishing — you don't need to publish after every single change.

Questions?

If you have any questions regarding this topic or any others, please reach out to our Support Team via email at support@lofty.com, by phone at 1 (855) 981-7557, or by chat with us through your Lofty CRM.