20/10 Use CSS to change font and size of all headings

andrewhallnz · Member · Dec 17, 2015 at 1:51 am
Copy link

Add topic to favorites
Using twenty ten with premium account, I would like to experiment with web-safe fonts for all headings ie replace the setting under customize>fonts>heading with a CSS named font family and font size. I do not seem to be able to work out the identifier for any headings, let alone for all.

Thanks. sorry about all, the questions I am learning heaps and really appreciate the help

Andrew

The blog I need help with is: (visible only to logged in users)
staff-totoro · Staff · Dec 17, 2015 at 9:17 pm
Copy link
Hi there,

One thing to be aware of is that it’s not possible to call webfonts in your CSS here on WordPress.com, as it is with self-hosted websites. To select a different font, you will need to use the site customizer to select those.

However, size can easily be adjusted in CSS. It is possible to make it larger in the customizer (by clicking on the fonts tab) as well, which is the easier way. You can see the button you need to click here to change the size: https://cloudup.com/cl0jIJtj5sn

However if you need some more fine-grained control, then you can use the following CSS to target your site headings:
```
#main .entry-title {
  font-size: 30px;
}
```
You can enter that code into the CSS tab here: https://wordpress.com/customize/sufinz.com

You are of course welcome to edit that to change the font size as well, if 30px does not fit your needs
andrewhallnz · Member · Dec 17, 2015 at 9:29 pm
Copy link
Hi Jerry, thanks for that. What you have given works for page and post headings but how do I change heading sizes in the top horizontal menu.

In response to your suggestion of changing size via the fonts setting,I find those changes too coarse by far – moving from normal to large is way too big a step. Also I have decided to use web-safe fonts rather than the fonts offered by wordpress.com – for the time being at least.

Thanks again

Andrew
thesacredpath · Member · Dec 18, 2015 at 4:30 am
Copy link
Hi Andrew, for the menu, add the following and adjust the font size as desired.
```
#access .menu-header, div.menu {
    font-size: 13px;
}
```
With CSS, we can override the font size for any element of your site.
andrewhallnz · Member · Dec 18, 2015 at 5:01 am
Copy link
With CSS, we can override the font size for any element of your site

We can indeed thesacredpath but I wish it was I can as well :-). I still have trouble finding my way from the chrome inspector information to the actual selectors to use. Even now I know what the right answer it it is not obvious to me from the inspector.

At the moment that is my full list of customizations covered but who knows what tomorrow may bring. Thank you soooo much again.

Andrew
thesacredpath · Member · Dec 18, 2015 at 5:46 am
Copy link
Andrew, we are here to help, so if you have problems, or can’t find the right selector, please let us know.
andrewhallnz · Member · Dec 18, 2015 at 9:21 pm
Copy link
Another day another (closely related) question. While the code above does exactly what I want, changes the top menu font size, when I try and change the font itself it doesn’t have any effect at all.
```
#access .menu-header, div.menu {
font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
}*
```
Any suggestions, thanks

Andrew
kathrynwp · Staff · Dec 21, 2015 at 3:01 pm
Copy link
Because you have custom fonts active, you’ll need to add a bit more code to change the menu font with CSS.

First, restore the CSS thesacredpath gave you to target the menu size.

Then, add this CSS to target the menu font:
```
.wf-active #access .menu, .wf-active #access div.menu ul {
  font-family: Helvetica, Arial, sans-serif;
}
```
andrewhallnz · Member · Dec 26, 2015 at 8:48 am
Copy link
Coming back to this question. I have now reverted to default font for the headers. Neither of using my own example selector above
```
#access .menu-header, div.menu {
font-family: Helvetica, Arial, sans-serif;
	font-size: 18px;
}
```
or kathrynwp’s suggestion
```
.wf-active #access .menu, .wf-active #access div.menu ul {
  font-family: Helvetica, Arial, sans-serif;
}
```
has any effect – I know it is delivering Arial but even if I specify Georgia or something else there is no change.

Thanks for any help

Andrew
thesacredpath · Member · Dec 28, 2015 at 8:35 pm
Copy link
Hi there, since you aren’t using custom fonts now, we can change the font and size on the top navigation with the following CSS.
```
#access a {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
}
```
andrewhallnz · Member · Dec 28, 2015 at 8:50 pm
Copy link
Thanks again thesacredpath, Happy Christmas and New year!

Andrew
thesacredpath · Member · Dec 29, 2015 at 3:33 am
Copy link
You are welcome.

No items found.