How to Customize Fonts Colors on Carrd

beginner 8 min read Updated 2026-03-24

Quick Answer

Customizing fonts and colors in Carrd is straightforward via the Style panel for site-wide changes like headings, body, and buttons, or the Appearance tab for individual text elements using color pickers and hex codes. Limit to 1-3 fonts and colors for consistency, preview on mobile for accessibility, then publish to apply. Common issues like unchanged styles are fixed by selecting elements properly and refreshing.

Get Deal → Partner

Try Carrd Full Carrd Review

Prerequisites

A free Carrd account (sign up at carrd.co)
Logged into the Carrd dashboard
An existing site or new blank page open in the editor
Optional: Brand hex color codes (e.g., #3355FF)
Browser with real-time preview enabled

Step-by-Step Instructions

Access your Carrd site editor

Log in at carrd.co, navigate to your dashboard, and open an existing site or click New Site to create one. Changes apply in real-time in the editor, with the canvas showing a live preview.

Customize global fonts

Click the Style button in the top toolbar, then select Fonts. Choose typefaces for Headings, Body text, and Buttons from available options (e.g., Poppins as a common default). Keep consistent across elements to avoid a messy look; limit to one main font and one accent font.

Use Poppins or similar sans-serif for modern readability.

Customize global colors

In the Style panel, click Colors. Set Background color first (common default: white or light gray). Then adjust Text colors for headings and paragraphs (ensure high contrast, e.g., dark text on light background for accessibility), and Button colors (use 2-3 brand tones, reserving vibrant for primary buttons).

Customize individual text element fonts and colors

Click directly on a specific Text element to highlight it, opening the left sidebar. Click the Appearance tab (paintbrush icon). Under font settings, select a Font (e.g., Poppins), adjust Size if needed, and click the Color box next to 'Color'. Use the color picker palette, enter a Hex code (e.g., #3355FF for brand blue), or adjust opacity slider. Click Done to apply.

Individual overrides take precedence over global styles.

Set site or section background color

Click Menu > Background, or click the target area (e.g., section/container). Set Style to Color, then use the color selector for a solid color (common default: white). Click Done.

Test light/dark backgrounds for text contrast.

Apply shared styles for consistency (advanced)

For repeated changes, use the Styles tab to create reusable styles (e.g., define a 'Brand Text' style with specific font, color hex like #000000, and size). Assign to multiple elements to update all at once.

Ideal for larger sites to maintain uniformity.

Preview on mobile and check accessibility

Use the mobile preview button in the top toolbar to check readability and contrast. Test dark/light backgrounds with text, ensuring high contrast for accessibility.

Switch between desktop and mobile views frequently.

Publish your changes

Click Publish in the top-right corner to make styles live. No terminal commands are required, as Carrd is a no-code visual builder with no configuration files or syntax needed beyond hex codes (e.g., #RRGGBB format).

Always preview in a new tab after publishing.

Common Issues & Troubleshooting

Changes not applying or stuck on default styles

Click directly on the specific text element to highlight it, then open left sidebar > Appearance tab > color/font picker. For site-wide, use top Style > Fonts/Colors. Refresh the page (Ctrl+R/Cmd+R) and preview in a new tab.

Color not saving or palette disappears without changes

Ensure you've clicked Done after selecting colors. Check for element overrides in the Appearance tab and refresh the editor. Verify you're editing the correct element or global style.

Styles look different on mobile

Use the mobile preview in the top toolbar to test. Adjust font sizes and contrasts specifically, as responsive design may alter appearances. Publish and check live site.

Individual element not overriding global styles

Select the element, go to Appearance tab, and explicitly set font/color there. Clear any inherited styles if needed and click Done.

Background color not updating

Click Menu > Background or the section/container directly. Set Style to Color and apply via selector. Refresh and preview.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Carrd website before purchasing.

Visit Carrd View Carrd Pricing