Use CSS and jQuery to Change the Font of Any Character on Your Divi Site

by

Image Intense title on hover

Love a font except for that one character? Need to highlight every occurrence of a word but don’t want to edit 1000 posts?

This tutorial will give you a launching pad for how to target a character (or even words) so that you can change the font or any other styling to match your needs!

step 1: Ready…

What’s the background? Why am I even here?

A recent post from Michael Mahin in the Divi Help and Share Facebook group posed this conundrum:

Using Divi to build a website for a designer who likes the Questrial Google Web Font, but would like me to change the square periods to round periods in everything but the body (where it’s too small to see).

Further background info available on this Facebook link if you are interested.

Not an easy task, but with a bit of jQuery and CSS it can be done.

Hang on, I’m not ready yet.

For example, you can’t target the period in an email address with CSS (to change the font-family or font-size, for example), because you can’t wrap that period with a <span> tag when typing it in manually. But that period (that “dot”) doesn’t look like you want it to.

How do we handle that? We target it! But before we target anything, we need to decide what it’s going to look like.

To get ready, add a bit of appropriate font styling to your child theme stylesheet first. Even before you took a look at this tutorial, you most likely already knew what font and what styling of that font you need.

Or, you could add it to the “Custom CSS” area in the “General” tab in Theme Options. If you want this to apply to one page/post only, then you can add it to the Divi Builder Settings on that page/post.

Anyway, given the idea of making sure our punctuation marks have a different appearance, we can create some CSS as such:

/* Suggested font adjustments */

/* This class is arbitrary, and can be anything you want to assign */
.my-enhanced-single-character-font {
    /* Pick your font family as desired! */
    /* FYI, Arial and other sans serif fonts have a square period. */
    /* Others have round periods. Check your local listings. */
    font-family: "cool-font-family-name", arial, sans serif; 

    /* or maybe 80% - just depends on what you need. */
    /* Maybe not needed at all in your case. */
    font-size: 120%; 

    /* you can add font-weight or whatever else here. */
    /* if you know CSS really well, then you'll know that all font styling can be done with one line of CSS */
}

step 2: Aim…

Target the selectors that might contain the character we want to change the font for.

In this specific example, we’re looking for any period (like at the end of this sentence, or within an email address) that exists outside the “copy” content of a Divi page. Therefore, we need to find the selectors (HTML elements and CSS classes) that are appropriate to what we are looking for. We need to find classes that are specific to anything in the header or footer areas.

/* Examples of selectors we might aim at in a basic Divi install. Note that this is not complete CSS! */

/* selector targets for any link text (email, phone) in the top header (contact and social) area */
#top-header a {}
#top-header a span {}
#et-top-navigation a {}

/* selector targets for anything in the footer info area */
#footer-info {}

/* target any paragraph tag within the main blog content */
#main-content p {}

step 3: Fire!

We know what we want to do, we’re targeted on what we want to change, now we need to make it happen!

This is where jQuery comes in. It’s powerful enough to do almost anything you might want. However, since this isn’t a jQuery tutorial, I’ll just present the code we need.

/* execute only when everyone is present */
jQuery(document).ready( function( $ ) {
	/* target our selectors and get each of them to do something for us */
	$( "#top-header a span:contains('.'), #top-header a:contains('.'), #et-top-navigation a:contains('.'), #footer-info:contains('.')" ).each( function() {
		$(this).html( function( index, text ) {
			/* replace all periods with periods wrapped in a CSS addressable span */ 
			return text.replace(/\./g, '&lt;span class="my-enhanced-single-character-font"&gt;.&lt;/span&gt;');
		});
	});
});

You might notice the selectors that are targeted, as suggested in the previous section. You might say that jQuery is, in a simple way, programmable CSS.

What we’re basically doing here is finding any period (“.”), within those targeted selectors. We are then wrapping that period in a <span> element. We use <span>, in this case, because it defaults to an inline block element that will not interrupt the flow of the page.

step 4: Debriefing

Add the jQuery to your site!

jQuery is simply a JavaScript library. WordPress come with all of it. You just need to know how to put this code into your site, right?

The easiest way to put code into your site is by placing it into the Add code to the < head > of your blog section in the Integration tab of Divi > Theme Options (your WordPress admin menu). Using a Code module is another option, but that only works on a page that Code module is on.

SJ James recently produced a live video that explains a bit about jQuery, what it is, and how to add it to your site.

Perhaps you are already familiar with either the Code module or the “Integration” tab in Theme Options.

Or, perhaps not! In that case, I highly congratulate you on your efforts! Plus, here’s the full text of what you will need to use:

&lt;script&gt;
jQuery(document).ready( function( $ ) {
    $( "#top-header a span:contains('.'), #top-header a:contains('.'), #et-top-navigation a:contains('.'), #footer-info:contains('.')" ).each( function() {
	$(this).html( function( index, text ) {
			return text.replace(/\./g, '&lt;span class="my-enhanced-single-character-font"&gt;.&lt;/span&gt;');
		});
	});
});
&lt;/script&gt;

You might notice the selectors that are targeted, as suggested in the previous section. You might say that jQuery is, in a simple way, programmable CSS.

What we’re basically doing here is finding any period (“.”), within those targeted selectors. We are then wrapping that period in a <span> element. We use <span>, in this case, because it defaults to an inline block element that will not interrupt the flow of the page.

step 5: I’m hard core, I need more

What just happened? Please explain!

If you’ve tried this with anything other than a period, you might have run into issues. No problem, I’ll get a bit more into it here.

Line 5 in the step 4 example above looks like this:

return text.replace(/\./g, '&amp;lt;span class="my-enhanced-single-character-font"&amp;gt;.&amp;lt;/span&amp;gt;');

It makes your head swim… I get it. That line utilizes an age-old regular expression to find what we’re looking for.

Above, we see an escaped period (\.) wrapped in “/ /g”. Whatever you put in that space between both “/” characters with the “g” at the end means “don’t just do it for the first occurrence, do it for ALL of them! (g = global)”

In the case of the period, it’s sort of complex, in that a period is not just an end of sentence marker. It’s also a delimiter or a marker when you are coding stuff. Like where you state classes in CSS:

.content { /* class style here - notice the period? */};

That’s why we have to “escape” the period by putting a backslash (“\”) in front of it – so we don’t mess with code! With few other exceptions, you don’t need to use that “escape, backslash” thingy.

If you are wanting to enhance pretty much anything other than a period, you’ll want to change out the “\.” part with just your character. Or even a text phrase. Like this:

return text.replace(/?/g, '&amp;lt;span class="my-enhanced-single-character-font"&amp;gt;?&amp;lt;span&amp;gt;');
return text.replace(/new/g, '&amp;lt;span class="make-new-really-stand-out"&amp;gt;new&amp;lt;/span&amp;gt;');

In the above cases, we are wrapping a question mark, or the text phrase “new”, in a <span> element so that you can apply any CSS you want without worrying about the text flow.

Again, if you want to get really hot and heavy by using the code above, make sure you do some research on both the JavaScript replace() text object function and regex (regular expression).

Let me know in the comments if this is clear enough or if you have any questions. You hard core coders can let us know any more efficient way of doing this. Thanks for reading! 🙂

4 Comments

  1. Anton

    Hi Terry, I learned a lot from this tip. Thanks for sharing. What confused me a bit is that your targeted id’s look like they should be placed somewhere (they’re displayed in a code editor) but I understand that just having the CSS and the JQuery is enough, am I correct?

    Reply
    • Terry Hale

      Hi Anton, thanks so much for the great feedback!

      Yes, the targeted ID’s in the example code blocks are generated by Divi. What you will add is whatever CSS class(es) you want to wrap the targeted text in, along with CSS to style your new classes.

      Reply
  2. Chris

    Uhemm! I know you’re just testing to make sure we are paying attention, but — “forward slash (“\”) ” , and ““escape, forward slash” thingy.” — I think you’re a little backwards there. That’s a back slash.

    Reply
    • Terry Hale

      Thanks, Chris! You’re exactly right. I don’t know where my head was. I’ve only been doing this stuff for 35 years haha.

      What’s even funnier is that backslash is one word, while forward slash is two words.

      I appreciate you keeping me well maintained! 🙂

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.