Font and font size of blog title on home page

radicchiorhino · Member · Apr 22, 2015 at 4:37 am
Copy link

Add topic to favorites
Hi,
I have the CSS feature and would like to change the font and font size on my blog title “the radicchio rhino”
What code shall I use to do this?
Thanks!
Mike

The blog I need help with is: (visible only to logged in users)
nizamilputra · Member · Apr 22, 2015 at 7:05 am
Copy link
Hi there,

You can change the font size with this css;
```
.site-title{
  font-size: 45px;
}
```
You can change “45” with other number you want.
radicchiorhino · Member · Apr 22, 2015 at 3:40 pm
Copy link
Thank You so much, that worked! Now is there a code I can use to make the font different with a different color?
Mike
radicchiorhino · Member · Apr 22, 2015 at 3:42 pm
Copy link
Also, the subtitle of my blog “eating for peace” -Is there a code I could use to edit the size and font of that one as well?
nizamilputra · Member · Apr 23, 2015 at 1:19 am
Copy link
You are very welcome :)

Thank You so much, that worked! Now is there a code I can use to make the font different with a different color?
```
.site-title a{
  color: #000;
}
```
Change #000 with other color you want in hex code. http://www.color-hex.com/

Also, the subtitle of my blog “eating for peace” -Is there a code I could use to edit the size and font of that one as well?
```
.site-description{
  font-size: 22px;
  font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif !important;
}
```
Change “22” with other number you want for the font size.
Change “Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif” with font family you want. Since Penscratch theme doesn’t have option to change site-description font particularly we should add “!important” and I suggest you to find web safe font family here http://www.cssfontstack.com/
radicchiorhino · Member · Apr 23, 2015 at 4:54 am
Copy link
Huge help! Thank you!
Now, if I want to change the font size, family, and size for each blog post, is there a code?
nizamilputra · Member · Apr 23, 2015 at 1:43 pm
Copy link
Penscratch use responsive typography setting, we will use media query to change font size. The code will be like this;
```
@media screen and (min-width: 50em){
  .entry-title{
    font-size: 1.8em;
    font-family: Rockwell,Courier Bold,Courier,Georgia,Times,Times New Roman,serif;
   }
}
```
You can use “em” or “px” for font size.

You also can use font from Typekit under Customize option – Fonts – Body text https://cloudup.com/cWQy3QBDwM5
radicchiorhino · Member · Apr 23, 2015 at 5:15 pm
Copy link
Thank You! Can I use this to change the font color of the blog title posts as well?
nizamilputra · Member · Apr 23, 2015 at 9:47 pm
Copy link
Of course, just add “color” property :).
Eg: color: #000;

No items found.