Change Drop Cap size & style in Blocks Editor

Drop cap option is by default available in the paragraph block of the Gutenberg blocks editor. For a few users, the size and style of drop cap text may seem big or small. Fortunately, you can easily customize drop cap styling using a little bit of custom CSS Code.

For starters, drop cap stands for dropped capital, where a large capital letter is used as a decorative element at the start of a paragraph.

Custom drop cap styling in blocks

Following is the default CSS Code that controls the drop cap styling of the text in the paragraph block on a WordPress website.

.has-drop-cap:not(:focus):first-letter {
    float: left;
    font-size: 8.4em;
    line-height: .68;
    font-weight: 100;
    margin: .05em .1em 0 0;
    text-transform: uppercase;
    font-style: normal;
}

Now, to reduce this font size – you add the following code to over-ride the default styling and reduce the size of the drop cap. You can add this code to the style.css file of your child theme. If you are not using a child theme, then go to Appearance > Customize and add this code to the ‘Additional CSS’ box.

.has-drop-cap:not(:focus):first-letter {
    font-size: 4.4em !important;
}

If you want to change the font style, then you can specify a different font name. In that case, final code would be:

.has-drop-cap:not(:focus):first-letter {
    font-size: 4.4em !important;
    font-family: georgia, sans-serif !important;
}

Using the drop cap feature in blocks

For users new to the blocks editor, here is how to use the drop cap feature. Add a new paragraph block or select an existing one. Then look for drop cap option under ‘block’ tab on the right sidebar.

Click on the Drop cap option to enable it. This will make the first letter stand out from the rest of the paragraph text as a result of bigger font style.

If you wish add icon instead of drop cap styling, you can do that using features added by the Editor Plus plugin.