Recommended Free Tools
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
In the WordPress Block Editor, select the opening Paragraph block, open its Typography settings, and turn on Drop cap. WordPress enlarges the paragraph’s first letter and aligns it beside the text. For a different size or a theme-wide effect, use custom CSS instead.
Add a drop cap in the WordPress Block Editor
-
Open the post in the WordPress Block Editor and select the Paragraph block whose first letter you want to enlarge.
-
Open the block’s Typography settings. If Drop cap is not shown, open the Typography options menu and enable that control.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Turn on Drop cap. WordPress enlarges the initial letter and aligns it to the left of the text, as described in its Typography Settings overview.
-
Preview the post at desktop and mobile widths. If the letter sits awkwardly or crowds the text, adjust the design using your theme’s typography controls or custom CSS before clicking Update or Publish.
The built-in toggle is the simplest option when you want a drop cap in one paragraph and the default appearance suits your theme. The Learn WordPress tutorial also describes using Drop Cap to enlarge the first text or letter.
Customize a drop cap with CSS
Use CSS if the built-in style is too large, too small, or otherwise does not fit your design. WordPress adds the has-drop-cap class to a paragraph with the feature enabled. A rule like this changes the initial letter’s size:
.has-drop-cap:not(:focus)::first-letter {
font-size: 3.55em;
}WordPress support identifies has-drop-cap as the relevant class and points to custom CSS for styling the drop cap: WordPress.org Support. Add the rule through your theme’s supported custom CSS facility, then preview the post to confirm that it takes effect.
For a classic-editor setup or a theme-wide pattern that styles the first paragraph, the WordPress Codex documents the :first-letter approach. This example assumes your content wrapper is .entry-content; change the selector to match your theme’s markup:
.entry-content p:first-child:first-letter {
float: left;
font-size: 3em;
font-weight: bold;
line-height: 0.9;
margin: 0.05em 0.1em 0 0;
}The Codex describes a drop cap as the first letter of the first paragraph displayed larger and extending below the text line: Designing Themes Using CSS. Because theme markup varies, verify the selector against your site rather than assuming every theme uses .entry-content.
Rank #4
Control whether the editor offers Drop cap
Block-theme authors can control whether the Paragraph block exposes the option through settings.typography.dropCap in theme.json. The Theme Handbook documents a default of true; setting it to false disables the control. See Typography settings in the Theme Handbook.
The handbook warns: “A note on drop caps: the current implementation feature is notoriously buggy with different font families, font sizes, and line heights.” Changing those properties may require CSS adjustments and a fresh visual check.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Fix common drop-cap problems
The Drop cap option is missing
-
Confirm that you selected a Paragraph block, not a heading or another block type.
-
Open the Typography options menu and check whether the Drop cap control needs to be enabled there.
-
If you are using a block theme, check whether its
theme.jsonsetssettings.typography.dropCaptofalse.Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
The editor shows a drop cap, but the published post does not
Inspect the paragraph’s markup for the has-drop-cap class. If it is present, check whether your theme’s CSS overrides the generated styling or whether your custom selector matches the actual content wrapper.
The letter overlaps text or looks wrong on mobile
Check the font family, font size, line height, and spacing at both desktop and narrow widths. WordPress’s Theme Handbook specifically notes bugs involving combinations of font families, sizes, and line heights. Adjust the CSS or return to the built-in styling if you cannot keep the letter readable and clear of the surrounding text.
Quick Recap
Choose the approach that fits your site
| Approach | Scope | Styling control | Maintenance and compatibility |
|---|---|---|---|
| Block Editor Drop cap toggle | One selected Paragraph block | Uses the theme’s default styling | Requires no CSS; available when the theme and editor expose the control |
Custom CSS for has-drop-cap |
Paragraphs where the drop-cap class is applied | Lets you adjust the drop cap’s appearance | Depends on theme CSS and should be checked after theme or style changes |
Custom :first-letter selector |
Can target a first paragraph pattern site-wide | Lets you define size, float, weight, line height, and margin | Selector depends on theme markup and may need adjustment when that markup changes |
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
