Index page font match blog font?

Help
1

I want to use the typewriter style font for my website shepherdsandhalos.org, and have in the posts; however, the index page blog title, subtitle, and non-post elements remain the Serif font. Is there a way to make these match please?

2

Hi @DeaconPatrick! There are a couple ways to do this in your CSS. If you go to your Customize settings and scroll down to Custom CSS, add the following:

html *
  {
   font-family: Monospace;
   }

This will make the typewriter style font global for your site. Let me know if that works. If anyone finds a more efficient way to do this then feel free to post here too.

1 Like
3

Thank you, @cjeller1592. This works, but all fonts become smaller, including the ones already shown in mono font. Ideas?

It would be great if there was a Font Family selection in the customize section for each blog.

4

Ah I see! What we want to do then is just key in on the parts of your site that are not Monospace rather than everything.

Try updating your CSS with this instead:

header, .pinned, .description p-note
 {  
    font-family:Monospace;  
}
5

Closer, yes! The title, subtitle and pinned posts look smaller than the serif font. See shepherdsandhalos.org and compare to stjosephworkshop.org.

7

That’s because the default monospace size is smaller than for sans-serif. Here’s an illustration, along with the code for how you can make monospace larger.

So per the example @cjeller1592 gave you, you could modify it something like this:

header, .pinned, .description p-note
 {  
    font-family:Monospace;  
    font-size:18px;
}
1 Like
8

Thank you, @bugbuster! I presumed that was the case, but coding is way over my head. Does changing the font size as you show make Header, subheader, and pinned all the same size, or simply upscale them equally?

9

Oh, right, I overlooked that. I think you’d need a separate CSS font-size statement for each (header, .pinned, etc) with different values, because they each probably have a different default font-size. Experiment with it until you get what you’re looking for.

10

16, 18, and 20 font size looks great. In case anyone else wants, here is the code (not sure how to block quote it or if I need to, it’s just pasted in directly ):

header
 {  
    font-family:Monospace;  
    font-size:20px;
}

.pinned
 {  
    font-family:Monospace;  
    font-size:16px;
}

.description p-note
 {  
    font-family:Monospace;  
    font-size:18px;
}
2 Likes
11

Glad to see you got it working @DeaconPatrick! Thanks for sharing the CSS. To make it in the code block quotes, just add ``` before and after.

And thanks for your help @bugbuster. Means a lot to have people fill that can fill in my little CSS knowledge!