How to Easily Add Text Outlines to Fonts in WordPress

Aug 8, 2024

Creating an outline around text in WordPress can be achieved using custom CSS. Here are the steps to outline any font in WordPress:

1-Access the WordPress Customizer or Theme Editor

You can add custom CSS through the WordPress Customizer or by editing your theme’s stylesheet directly.

Using the Customizer:

  • Go to your WordPress Dashboard.
  • Navigate to Appearance > Customize.
  • Select Additional CSS.

Using the Theme Editor:

  • Go to Appearance > Theme Editor.
  • Find the style.css file.

2-Add the Custom CSS

Use the following CSS code to add an outline to your text:


.outline {
    color: transparent; /* Makes the inside of the text transparent */
    -webkit-text-stroke-width: 2px; /* Thickness of the outline */
    -webkit-text-stroke-color: black; /* Outline color */
}

 

Explanation of the CSS properties:

color: transparent; makes the inside of the text transparent so only the outline is visible.
-webkit-text-stroke-width: 2px; sets the thickness of the outline (you can adjust the 2px value to make it thicker or thinner).
-webkit-text-stroke-color: black; sets the color of the outline (you can change black to any color you want).

3-Apply the CSS to Specific Text

  • If you want to apply the outline to specific text, you need to wrap that text in a span or div with a class in the WordPress editor.
<span class="outline"> Outlined text</span>

Outlined Text

5. Save and Publish

Once you’ve added the custom CSS, click Publish in the Customizer, or save the changes in the Theme Editor.

6. Check Your Site

Finally, visit your site and check if the text outline appears as desired.

7-Note:

The -webkit-text-stroke property works best on WebKit-based browsers like Chrome and Safari. If you need cross-browser compatibility, additional CSS techniques or JavaScript might be required.
If you’re targeting specific blocks or elements in a page builder like Elementor or Gutenberg, ensure to add the appropriate class or ID to those elements and reference them in your custom CSS.