cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Go to solution

Cannot change font in Posts - Escapade Theme

I'm having a frustrating issue where I can't change the font family in paragraph blocks for posts. However, font changes work in paragraph blocks for pages. I'm using the Escapade theme.

 

I also would like to know how to remove the preceding and next post arrows at the bottom of posts.

 

Any help would be greatly appreciated. It's a great theme but customizing it has been a bit of a challenge.

1 REPLY 1
New
Solution

Re: Cannot change font in Posts - Escapade Theme

>> I'm having a frustrating issue where I can't change the font family in paragraph blocks for posts. >> However, font changes work in paragraph blocks for pages. I'm using the Escapade theme.

 

To customize the paragraph text (content in <p> tags) on posts, you need to find the class for these post types identified in the class attribute within the <body> tag, right after the closing </head> tag. This would be:

.single-post

 

As an example, let's use a post from wpbeginner: https://www.wpbeginner.com/beginners-guide/how-to-setup-a-professional-branded-email-address-with-ou...

 

If you view the page source or use Inspect Element in Chrome, you'll find the body tag, and the class we're looking for: Here's a post of theirs, and here's the <body> tag class:

 

<body class="post-template-default single single-post postid-9175 single-format-standard header-image content-sidebar" itemscope="" itemtype="https://schema.org/WebPage">

 

You can target all posts in your theme's style.css, or anywhere in your theme options where you can add custom CSS, by pulling out the single post's class selector:

 

.single-post

 

Now, determine which elements within that class you wish to style. For example, if you just wish to target only the paragraph text in your posts (inside elements with a class of single-post) you can add this to your custom CSS or style.css:

 

.single-post p {
font-family: /* Add font family here*/;
}
/* Style all paragraph text to display as Open Sans, if/when the user's browser supports it */
.single-post p {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

If you wanted to ensure that every piece of paragraph text -- anything inside <p> tags -- everywhere on your site to display as the same font, you can add this instead:

 

 

p {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

 

 

If you have a universal font for EVERY piece of text on your site, e.g. the navigation / headings / footer / etc. all use a single font, you can go up a level and use the parent, body:

 

/* Every child element within the <body> tags to use the same font */
body { font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
 /* ONLY headings as a specific font, e.g. Roboto */
h1,h2,h3,h4,h5,h6 { font-family: 'Roboto', Arial, Helvetica, sans-serif; }
 /* All paragraph text EVERYWHERE on the site */
p { font-family: 'Open Sans', Arial, Helvetica, sans-serif; }
/* Target all paragraph text but ONLY on single posts */
.single-post p {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

 

Note: If a given user's browser supports Open Sans, it will display as Open Sans for them. Because not all browsers support all fonts (more on that here) , you can include backup fonts in the order of your preference. A common solution is the one used above.

 

 

>> I also would like to know how to remove the preceding and next post arrows at the bottom of posts.

 

Easiest way is to find the most unique ID or class and add display:none; in your CSS. So, right click on the element you wish to hide, and choose Inspect Element in Chrome to go and identify the element's ID or class.

 

Then, click the plus sign to add CSS targeting that element. Add display:none; for the element, and voila. Copy that into your CSS. (It's a bit hard to give you the precise solution without knowing the id or class for the arrows.)

e.g. if it was a specific ID on the element in question, e.g. <div id="previous-post-id">, where you'd target in your CSS and hide by adding

 

#previous-post-id {
    display:none;
}


...or if the next/previous element only has a less-specific class on the element, like <div class="a-class-name-eg-next-post">, then you'd target in your CSS and hide by adding:

 

.a-class-name-eg-next-post {
    display:none;
}

 

Note the difference between targeting IDs and classes inside CSS. ID uses the hash, #id-name {} and a class uses a period, .class-name { }

Hope that helps!

 

ADLISP...all day long I slay problems.