[Resolved] A few quick customisation questions

[Alasdair]

I have just overhauled the look of my website and run into a few issues. Currently, I am working my way through adding custom CSS for most of these but was unsure if there was actual settings I was missing.

1. Headings work as expected, and use the designated font from the typography settings, in the blog layout and at the top of individual pages. However, all the headings in the main content inherit from the body font. Inspecting the page it looks like the heading font is being overwritten by the body font. Is there a way to stop this from happening?

Edit: The correct heading fonts are used on the Contact page, but not other pages for some reason.

2. Is there a setting for changing the font and colour of image and other captions? Similarly, is it possible to change the colour and weight for separator blocks? Both are currently difficult to see with my current theme

3. Similarly, is there a setting to reduce the font weight for date, category, and tags – but not body text?

4. Is it possible to increase the spacing between the categories and tags shown after a post?

5. For tablet and mobile views is it possible to align the “+More” button to load more posts in the blog layout to the left so it matches the “Read More” buttons that follow blog excerpts. Doing this seems beyond my noob CSS skill level as “align: left” shunts it all the way to the left outside the main container.

6. Finally, what is the easiest way to add Sansita as a font option within the typography settings?

[Leo]

Hi there,

1. Are you referring to this heading?
https://www.screencast.com/t/MqhsgDwD1QrC

If so, the font-family setting is overwritten by the HTML inline style as indicated above.

2. Image caption requires CSS:

figcaption {
    font-family: "Oswald", sans-serif;
    font-size: 20px;
    color: #000;
}

and separator block:

.wp-block-separator {
    background-color: #000000;
    height: 3px;
    width: 400px;
}

3. Try this:

.entry-meta {
    font-weight: 300;
}

4. Try this:

.cat-links, .tags-links {
    margin-bottom: 5px;
}

5. Try this:

.masonry-load-more.load-more {
    text-align: left;
}

6. This should help:
https://docs.generatepress.com/article/customizing-the-google-font-list/#adding-your-google-font-to-the-list

Let me know 🙂

[Alasdair]

Thanks for the reply.

1. Argh, bloody Gutenberg. I forgot about this issue when it happened before. On converting old ‘classic’ posts and pages to Gutenberg, inline styles were added that kept the original font used in the ‘classic’ posts. Do you know if there is any way to quickly remove inline styles from Gutenberg blocks?

2-5. Perfect! Thank you.

6. Magic! Got it working.

[Leo]

1. Unfortunately it would have to remove manually as far as I understand.

[Alasdair]

Managed to find a plugin, “Advanced Rich Text Tools for Gutenberg”, which adds a button to clear formatting. It removes bold, links, and other formatting as well – but manually fixing the few blocks with those and using the button to nuke the rest was definitely much faster overall.

Thanks again for your help.

[Leo]

No problem 🙂

[Author]

Posts