Search
Close this search box.

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
Thin 100
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 our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.