How to Insert Bold Quotation Marks

There are three ways, at least, for adding quotation marks to a Blockquote. The first is the easiest – you just type them where you want them to go.

The second and third ways are achieved by writing CSS rules for Styling a Blockquote. If you have a WordPress.com theme, you will have to purchase the CSS upgrade before you can make these changes permanent. This option gives you many style upgrades, even if you never touch the CSS Stylesheet Editor.

You write the CSS in the Stylesheet Editor. Go to your Dashboard and click on Appearance – Customize – CSS.

Technique 1: Using the before selector to automatically add quotation marks to a blockquote.

The theme used a before selector that contained content: ‘\0201C’;
I added the CSS  (in italics below) to do three things:
I added the border with the blockquote { selector.
I moved the blockquote right and changed the background color with the .site-content .entry-content blockquote { selector.
I moved the existing blockquotes built into the theme to the left with the  .site-content .entry-content blockquote::before { selector.

blockquote {
border: .1px #a8a8a8;
border-style: solid;
border-radius: 10px;
}

.site-content .entry-content blockquote {
margin-left: -5px;
margin-top: 2px;
margin-bottom: 7px;
padding: 15px 20px .25px 30px;
background: #ffffff;
display: flex;
}

.site-content .entry-content blockquote::before {
margin-left: -35px;
margin-top: -10px;
}

Your theme may use different selectors, and you will have to figure out which ones to use.

Technique 2: If you want to use blockquotes you designed yourself, here is one way to do it:

Download, or create your quotation marks in the size you want them to appear on your page, then upload them to your WordPress Media Library. Note what the URL is for that image.

The quotation marks I’ve used here is a small .gif image that is 15X15 pixels in size. I could have made it larger, or a darker colour if I wanted bolder quotation marks.

Then write the CSS (in italics below) in the Stylesheet Editor. The blockquote { selector may not be the selector used by your theme – so you may have to test other selectors until you find the one that works.

blockquote {
background-image: url(‘insert your quotation mark URL here’);
background-position:top left;
background-repeat:no-repeat;
padding:.7em 2.2em .2em 2em;
color:#121212;
}

Insert your image URL where it says insert your quotation mark URL here. Your image URL must be inside one set of single quotation marks.
The setting for padding will determine where the image sits on your page, so you will have to tweak that.
The setting for color will determine the color of the font, so you will have to tweak that too.

There, that is it. Or it might not be it, in which case you should contact the WordPress Happiness Engineers or the WordPress Forum and ask for help!