How to Set a Custom Font Weight in Divi

One of the crucial things that some people might experience when creating content for a website is choosing the right font weight. Like deciding on a font family, deciding on a font-weight is just as tricky.

Divi allows you to set the font weight; you can find that option on some modules, such as Text, Post Title, Blog, etc. Unfortunately, the choices of font weights that you can choose are limited; they only offer five options: Light, Regular, Semi Bold, Bold, and Ultra Bold.

This article will show you how to set a custom font weight in Divi. For your reference, you can check the following common font-weight names and values below:

Common Weight NameValue
Thin100
Extra Light200
Light300
Normal400
Medium500
Semi Bold600
Bold700
Ultra-Bold800
Heavy (Black)900

How to Set a Custom Font Weight in Divi

Well, let’s start the tutorial!

First, go to your Divi Builder editor and insert any modules with text elements inside (Text, Post Title, Blog, etc.) into the canvas area. In this example, we will add a Text module.

Note: Once you insert a module, you can edit and customize the module as you prefer, except for the Text Font Weight setting. On this setting, please keep it on default. We will set the font weight later by adding the CSS snippet.

Next, we will add a simple CSS snippet to the module. On the module settings, go to the Advanced tab -> Custom CSS -> Main Element.

Now it’s time to write a very simple CSS snippet for the Main Element field. The CSS snippet only contains a CSS property font-weight, and a value. Let’s say you want to set the font-weight to Heavy (900); you can write the CSS as below:

font-weight: 900

Note: The placement of adding the CSS snippet depends on the module you use. For example, if you want to set the font-weight to Body Text on the Blog module, you can write the CSS to the Body field.

The Bottom Line

This article shows how easily you can set a custom font-weight in Divi. You can customize your preferred font weight by adding a concise CSS snippet to your module. The font’s weight will give you a clue about the best size range for the best readability. Play around with the values and find the best font weight for your site.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,500+ WordPress users receiving tips and insights on creating on WordPress with Divi.

Creating with WordPress?​

Subscribe and join 1,500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.