Create a script text with glitter overlay on WordPress

I love me some shiny, glittery text on a website. It’s a great way to make your page or post pop when you need to highlight certain copy.

I often see people use an image when they want to do a fancy font. But this is a really bad idea because it impedes your SEO for that text and often doesn’t scale well on mobile.

The better way to do it is to use a little CSS and HTML to create a script text with glitter overlay. You can totally do this on WordPress, even if you’re not so tech savvy.

Just follow along.

Add your files to the Media tab

First, we’re going to add two files to the Media tab on WordPress. They are the font file and the image file that will act as the glitter overlay.

You want to make sure that your font file is .TTF format, and that the file name doesn’t have any spaces. You can change the file name on your desktop before loading it to your website. For example, the font I’m using for this is “White Pinky.ttf” so I renamed the file to “WhitePinky.ttf” to make all one word.

White Pinky

For the image file, you want to make it about 900px wide but it only needs to be about 300px tall. You also want to compress it as much as possible while still looking clear, so it doesn’t take a long time to load on each page.

In your WordPress panel, navigate to Media > Add New > Select Files > Select your file > Open. Repeat for both your font and your image.

Create some CSS magic

Now we’re going to add some CSS magic to create our glittery script.

Your theme might have the CSS editor in a different place, so you might need to refer to your theme creators’ documentation. For many WordPress websites, you’ll probably find it under Appearance > Customize > Additional CSS

We’re going to create a font family for our script font. Type this into your CSS editor:

@font-face {
font-family: pinky;
src: url(“https://geekunicorn.com/wp-content/WhitePinky.ttf”);
}

Replace “pinky” with whatever name you want to give your script font. I usually name it similar to the original name of the font.

Replace “https://geekunicorn.com/wp-content/WhitePinky.ttf” with the link your media file assigned the font when you loaded it up. You’ll find that by navigating to your Media tab, then clicking on the file and on the right side, it says “copy link”.

Next, we’re going to create a CSS class that has the script font and the glittery overlay.

.glitter-script {
font-family: ‘pinky’, script;
padding: 0.6em 0.2em;
background-image: url(“https://geekunicorn.com/wp-content/glitter-rainbow.jpg”);
background-repeat: no-repeat;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}

But replace the word “pinky” with the font-family name you gave your font when you added it using @font-face.

And replace the file URL ” https://geekunicorn.com/wp-content/glitter-gold.jpg ” with the URL link of your image that you’ll find in the Media tab.

Assign the new class to any text on your website

To add the glitter text to certain copy on your website, you’ll want to edit your text in HTML to add the class you created earlier.

In Gutenberg for WordPress, click the three dots on top of the text block. Then select “Edit as HTML”. If you’re using a page builder, you may find this elsewhere but there is almost always an HTML option

While you’re in “Edit as HTML”, type <span class=”class-name”> in front of the text you want to highlight, and </span> afterwards. Like this:

I love me some shiny, <span class=”glitter-script”>glittery text </span> on a website. It’s a great way to make your text pop when you need to highlight certain copy.

And that’s it! You’re done.

Don’t forget to hit “Save”, “Publish”, or “Update” on your page or post to make the change live.