facebook twitter instagram youtube linkedin thumbs-up thumbs-down arrow-right progress locked success play pause

Where can I change the colors and fonts on my site?

Our website builder offers plenty of choices when it comes to the colors and fonts you’d like to have on your site. What follows is a guide on how to make changes to the main portions of your site. These tips can be applied to other sections as well, and if you’ve had custom work done in the past, some customizations may need to be made by our team. If you encounter any issues changing the styles on your website, please message support.

Accessing Styles


1. Log into your account at Twentyoverten.com

2. Access Your “Site Settings” in the bottom-left toolbar:

Site Settings in Lower Third

3. Click “Styles” at the top of the menu:

4. A dropdown will appear, allowing you to make changes to different sections of your website. We recommend starting with the “Main” section, which will apply changes to your entire site:

Styles Main Dropdown

5. You can choose other sections to customize that will override your main settings. For instance, if you wanted the links in your header to be a different color than from the rest of your website, you would select “Header” from the menu:


Select Other Sections Dropdown

6. Under each section are sub-elements. Clicking each will open a new dropdown of options. The sub-elements that can be customized are “Typography,” “Links,” and “Buttons”:


Main Sub Elements

To Make Changes


1. For “Fonts,” click and select from the dropdowns to choose families and styles:

Typography Font Family

2. For “Colors,” click the circle icon and enter a color number into the text box or click and drag within the color window:

Typography Font Color


Typography Styles

1. The first place to make updates is to the “body” of your website’s text. Think of these as the paragraphs that fill up the page:


Typography Body

2.“H1” can be selected to make changes to the largest headlines on your site. These look like the text here and often go in the “hero” section of your site:

H1 Settings

3.“H2” can be selected to update the second-largest headlines on your site. They will most often appear on your contact page and at the top of your forms:


H2 Settings

4. “H3” settings are applied to the headlines that are most often used as titles that lead into paragraphs:


H3 Settings

4. “H4” settings are applied to the smallest headings on your site, like the email address in your bio:


H4 Settings

Link Styles


1. There are 2 settings to update: “Default” and “Hover.”

2. “Default” is how the link first appears on your site:

Linke Settings3. “Hover” is how the link appears when someone’s cursor or mouse rolls over it:

Hover Link

Button Styles


1. Just as shown with “Links” in the above screenshots, “Buttons” also have default and hover settings:

Button Default and Hover


2. “Default” buttons are the ones that most often appear with your contact forms:Default Buttons

3. The settings for your “Default” buttons will carry over to your “Primary” and “Secondary” button styles unless you decide to override them:

Primary Background Button

Opacity & Bases


3. “Opacity” is sometimes an option for color styles, most notably “Bases,” which are the background colors for elements. While “Bases” aren’t customizable under “Main,” they are everywhere else.

4. The most common place you’ll adjust the “Opacity” is under “Hero” > “Base” > “Background.” The overlay background color there is usually semi-opaque to make the text more legible against the background image.

5. Click the slider at the bottom of the color window and drag it right to make the background more opaque:

Drag Opacity Right

6. Click the slider at the bottom of the color window and drag it left to make the background less opaque:

 Drag Opacity Left





1. Accents appear throughout your website, most notably as quotes and parts of layouts:

Accents Quote

Accent Layout

2. To update this small detail, go to “Page” > “Base” > “Accent.”


Have more questions or need help with your settings? Just get in touch with support!

Was this article helpful?
Be the first to tell us!
You already voted on this article!