Custom fonts for blog title and post meta

Hi,

I would like to use a different font and font color than the theme’s default for single post pages. Let’s say I want it to be Merriweather 60px and color #003377, with line height 120 px and padding top 30px…
Then I want to change the font and color for post meta date (I removed author meta) - Let’s say I want to use Cabin red 12 px with line height 18px.
Could you provide me with the custom css please? I looked in the forum for answers and found quite a bit of custom css I am happily tweaking and using but I am a bit stuck with those two things. Thanks for any suggestions.

Hello,

Let’s say I want it to be Merriweather 60px and color #003377, with line height 120 px and padding top 30px…

I’m not sure where exactly you want to apply that. Can you please specify it more precisely?

Then I want to change the font and color for post meta date (I removed author meta) - Let’s say I want to use Cabin red 12 px with line height 18px.

You can try to add the following CSS code at the very top (it’s important) of your Customize → Additional CSS section.

/* Single posts meta font styling start */
@import url('https://fonts.googleapis.com/css?family=Cabin&display=swap');
.single .single-meta,
.single .single-meta a {
    font-family: 'Cabin', sans-serif;
    color: red;
    font-size: 12px;
    line-height: 18px;
}
/* Single posts meta font styling end */

Kind Regards, Roman.
aThemes Support

Hi, I would like Merriweather 60px to be the font for the title of the post.
Thanks for the other CSS, works for me.

Can I specify a

font for blog posts that is different from the default font I am using on pages?
Thanks for all the help.

Hello,

I would like Merriweather 60px to be the font for the title of the post.

Please try to use this CSS code instead of the previous (but note that most likely post title will be too large on mobile devices):

@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cabin&display=swap');

/* Post titles font styling start */
article.post header.entry-header h1.title-post.entry-title {
  font-family: 'Merriweather', serif;
  font-size: 60px;
  color: #003377;
  line-height: 120px;
  padding-top: 30px;
}
/* Post titles font styling end */

/* Single posts meta font styling start */
.single .single-meta,
.single .single-meta a {
    font-family: 'Cabin', sans-serif;
    color: red;
    font-size: 12px;
    line-height: 18px;
}
/* Single posts meta font styling end */

Can I specify a font for blog posts that is different from the default font I am using on pages?

Yes, you can specify a font for blog posts that is different from the default font in the similar way with CSS.

Kind Regards, Roman.
aThemes Support