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 Name | Value |
| Thin | 100 |
| Extra Light | 200 |
| Light | 300 |
| Normal | 400 |
| Medium | 500 |
| Semi Bold | 600 |
| Bold | 700 |
| Ultra-Bold | 800 |
| 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.
