How to Change the Accent Font and Color in the Ramona Child Theme

The Accent Fonts referred to in this tutorial can be previewed on the Branding page of your new site. These allow you to incorporate different fonts or font styles within one line of text anywhere on your site. In Divi, this has to be implemented with a bit of code but is easy to modify.

Before we get started, I recommend having both your accent font and color picked out. You’ll want to have the HEX code saved and accessible.

NOTE:  This tutorial only covers incorporating a Google Font. Adding your own, custom font requires a slightly different approach that we’ll cover in a future tutorial.

NOTE:  As you work through these steps, you can view your changes on the front end of the site using the Branding page. Just keep that page open in another browser and refresh it after saving your work on the back end.

1. Select Your Accent Font Color

To pull your HEX code from your color palette:

In the sidebar, go to Divi > Theme Options > find the Colors Picker Default Palette, and click on the color you plan to use. Highlight and copy the HEX code that appears. Paste this somewhere handy.

2. Select Your Google Font

Start by searching the Google Fonts library to find your perfect accent font. In the Ramona Theme, I’m using Aguafina Script.

Once you’ve decided on your font, you’ll need to select it to help us grab some important information. Look for a blue link that says Select with a plus icon and click that.

This should open an information pane on the right side of the screen. If it doesn’t, just look for the View Selected Families icon in the upper right corner of the page (it’s a group of three gray squares with a plus icon) and click on that.

Make sure you only have one font selected. You can remove any extras by clicking the gray minus icon.

Once your font is selected, keep that browser page open as we’ll use this info shortly, but for now, switch back to your tab with Divi.

3. Update Divi Settings

Under Divi > Theme Options > General tab (selected by default) > scroll to the bottom section labeled Custom CSS.

There will be two sets of code here. One for .cursive-font and one for .color-text.

Below is a breakdown of each setting used within the code snippets:

Color:

Change the HEX value to your desired color under both .cursive-font and .color-text. Make sure you keep the hash symbol ( # ) at the beginning of the code and the semi-colon ( ; ) at the end.

Font Family:

Head back to your Google Fonts tab. In the right window pane with your font details, click the Copy icon in the box labeled CSS Rules to Specify Families.

Head back to the Custom CSS section in Divi. Highlight the full line of code that reads: font-family: ‘Aguafina Script’, cursive; 

Delete that code and paste in your new line of code. It should start with font-family and end with a semi-colon ( ; ).

Go ahead and hit the green button to Save Changes.

Head back to your Google Fonts tab. In the right window pane with your font details, click the Copy icon in the box just above the CSS rules. Make sure the <link> option is selected.

Head back to the Divi Theme Options, but switch to the Integration tab (located within the purple navigation). Go to the section labeled Add Code to the < head > of your blog.

Highlight and delete the full section of code BETWEEN the labels:

<!– Embed Google Font –> and <!– END –> that reads:

With your cursor between those same labels: <!– Embed Google Font –> and <!– END –>, paste your new code.

Click the green button to Save Changes.

Font Size:

Staying within Divi Theme Options, head back to the General tab and scroll down to the Custom CSS section.

The font size is currently set to inherit. This means your cursive font will match the size of the text that your accent font is embedded within. If you have it labeled as H1, the size will match that of your H1 font. If you have it labeled as Paragraph (i.e. body copy), it will match that size.

If you want to change the size to be a little bigger or smaller, I recommend using em values. If you want the cursive font to be two times bigger than the text around it, enter 2em. You can even use decimal values. If you want the cursive font to be one-and-a-half times bigger than the text around it, enter 1.5em.

If making this change, just make sure you only delete the word inherit. Keep the label font-size: at the beginning and the semi-colon ( ; ) at the end.

Letter Spacing:

Staying within Divi Theme Options > Custom CSS section.

The letter spacing is currently set to normal. This means there is no added spacing between letters.

If you want to add spacing, you can enter a pixel value. Enter 1px to add a single pixel of spacing between letters. You can add any number based on your preference.

If making this change, just make sure you only delete the word normal. Keep the label letter-spacing: at the beginning and the semi-colon ( ; ) at the end.

Click the green button to Save Changes.

Refresh your Branding page to view the changes on the front end of your site.

How to Use the Accent Fonts

Within any Text Module, you can implement the Accent Fonts by adding a little code around the “special” word. Let’s start by taking a look at a module where it’s already in use.

In the sidebar, go to Pages > Home and click on Edit With Divi to launch the Builder.

Hover over the quote in the header until you see the gray frame for the Text Module. Click on the gear icon to open it.

By default, the Text Module opens to the Body copy. Look for the two tabs on the right labeled Visual and Text. Click on the Text tab. You should see this:

The code in red is what you’ll want to place around any word where you want to apply the cursive effect.

To apply the color effect only use this bit of code instead: