Custom CSS drop caps in Wordpress 6.2.2 with Twenty Twenty Three theme

Question

I'm trying to do drop caps in the Twenty Twenty-Three theme on WordPress 6.2.2.

All the docs I find when I google it are for older versions of WordPress, and possibly on an older theme. It used to be easy, but I can't find relevant docs for how to do this with the Twenty Twenty-Three theme.

And following on from that, how do I add custom CSS to use a different font for the drop caps?

I have a couple of older posts from an earlier version of WP that have drop caps and I used to have them styled via a child theme I was using, but I upgraded to the Twenty Twenty Three theme and I lost all my customisations.

I've added the following code via the "Tools > Theme file editor", but it doesn't seem to be working.

p.has-drop-cap:not(:focus)::first-letter
{
  font-family: 'Fredericka the Great', cursive;
}

Answer 1

Neither TwentyTwentyTwo nor TwentyTwentyThree currently support dropCaps. Since the layout looks undesirable on certain user systems, it was agreed that dropcap support is not mandatory for either theme. Read more - WordPress issues: https://github.com/WordPress/twentytwentytwo/issues/180

But there's a workaround available. Since you have to touch the theme core files, the use of a child theme is probably not a bad idea. Otherwise, adjustments could be overwritten when updating.

The workaround was first pointed out in a comment by @colorful-tones a user on GitHub, in this thread. The related CSS is from @justintadlock, another GitHub user, you can read more here.

So here are the steps you need to take to enable dropCap support:

1. Since you are using the theme file editor, go there and open theme.json.
2. At about line 109, under typography, change the value for dropCap from false to true.
3. Save the file.
4. Open the theme's style.css and add:

.has-drop-cap:not(:focus)::first-letter {
    font-family: var( --wp--custom--drop-cap--typography--font-family, inherit );
    font-size: var( --wp--custom--drop-cap--typography--font-size, 5.5em );
    font-weight: var( --wp--custom--drop-cap--typography--font-weight, 700 );
    font-style: var( --wp--custom--drop-cap--typography--font-style, normal );
    line-height: var( --wp--custom--drop-cap--typography--line-height, .85 );
    margin: var( --wp--custom--drop-cap--spacing--margin, 0.05em 0.1em 0 0 );
    padding: var( --wp--custom--drop-cap--spacing--paddig, 0 );
}

5. Save the file.

NOTE: If you want to use a custom font you may have to add your font to the typography section in theme.json. A support topic from WordPress.org could be helpful hereby. You can also try to replace all variables directly in the CSS part with your own values. But I'm sorry I can't remember if it worked like that, because I used this workaround only once and it was some time ago and the page doesn't exist like that anymore. You'll just have to test it yourself.

Finally, don't forget to properly include your Fredericka the Great font into Wordpress.
Hope this works for you.