[Support request] Serif font for only blog text

[Matthew]

I used this CSS for a specific font for my blog:

.entry-content {
    font-family: 'Roboto Slab';
    color: red;
}

However this was wrong on my part because there are many other site areas which are also affected.

Is there a better way to target only the article text for my blog to use the serif Roboto Slab.

It’s a custom post type called ‘Pictures’.

[Elvin]

Hi there,

There are multiple ways of doing this.

You can either:

Try the pure CSS approach by checking the body classes for any unique indication of a custom post type.

Normally, custom post type post pages have a different classes in their body tags which is significantly distinguishable from the normal post type.

The default post type normally have these classes: post-template-default and single-post as shown here: https://share.getcloudapp.com/o0uERBLy

While custom post types (this example “Book” with slug book), contains these classes: book-template-default and single-book as shown here: https://share.getcloudapp.com/Qwu9LDJR

That said, we can use this as CSS selector.

Example:

body.single-pictures .entry-content {
    font-family: 'Roboto Slab';
    color: red;
}

Alternatively, you can use a Hook Element hooked to wp_head with display rule set to the custom post type posts you have with this code in it:

<style>
.entry-content {
    font-family: 'Roboto Slab';
    color: red;
}
</style>

[Matthew]

This is great! I used the first method you outlined.

The Roboto Slab was also applied to an area immediately after my article text that is used by a glossary plug-in to place ‘related terms’ appearing in the article. I want this area to be sans serif and I added the below CSS which works

body.single-pictures .cmtt_related_linked_terms_wrapper {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 19px;
}

On Inspection the class .cmtt_related_linked_terms_wrapper is ‘inherited from div .entry-content‘.

Is my overriding CSS method advised, or is there a better way to stop this class from inheriting from div .entry-content in the first place? It could simply use the font I have in the Customiser under Customising > Typography > Body which is identical to the CSS I put above.

[Elvin]

Can you link us to a sample post under single-pictures post type?

If you’ve set the font Roboto on Appearance > Customize > Typography > Body, it should be the one used by the content as the font as the default theme behavior. There shouldn’t be any need for a custom CSS if you’re going to use the same font family for all body content regardless of post type.

IF that’s not the one applying then there may be something else applying a font-family property.

[Matthew]

This is what you said earlier and works great

body.single-pictures .entry-content {
    font-family: 'Zilla Slab', serif;
    font-weight: 500;
    font-size: 23px;
}

So Zilla Slab now for just Pictures post text and not throughout all my site.

(note: changed from Roboto Slab earlier in this Topic)

While this is now targeted and working as I said, it is changing the section ‘Related Terms:’ listing my glossary terms after the post text – to Zilla Slab. So the glossary plug-in is somehow using the Zilla selector we put for those terms, and not the customiser.

So I use this CSS to address that:

body.single-pictures .cmtt_related_linked_terms_wrapper {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 19px;
}

But is there a more elegant CSS to achieve same.

[Elvin]

Oh right yeah my bad. I get context of multiple topics all mixed up. lol.

I think that’s good to go. Your CSS is actually quite clean and simple already. 🙂

[Author]

Posts