Change font in header, tagline, and menu bar

To change all current font to Alice do the following:

Go to Appearance > Customize > Additional CSS and write the follwing:

body, html, a, p, span, ul, li, h1, h2 {
  font-family: Arial !important; /* I have added Arial here. You can change to whatever you want */
}

To make menu capitalize (only the first letter will be in cap):

Again, go to Appearance > Customize > Additional CSS and write the follwing:

.navbar-nav li a{
  text-transform: capitalize !important;
}

Hope this works!

Hey- thanks! That sort of worked, but I think Alice is not a font option here for some reason, and I realized it actually looks better to have a couple different fonts. Could you tell me the names of the fonts currently being used in the header, tagline, and menu? And, how to change just the header?
Thanks!

Most probably presently your site heading is using a font called “Raleway” while the Tagline is using “Caveat”. Both of the above are Google Fonts.

Raleway:
https://fonts.googleapis.com/css?family=Raleway%3A200&ver=4.7.3

Caveat:
https://fonts.googleapis.com/css?family=Caveat&ver=4.7.3

Thanks!

Hi there,

Thank you very much Subrata Sarkar for your help. We’re appreciate that.

You’re right. The fonts in header are: Raleway and Caveat.
You can change it with the following styles:

HEADER:

.logo .header-logo-text {
  font-family: Arial;
  font-size: 26px;
}

TAGLINE:

.tagline {
  font-family: Arial;
  font-size: 16px;
}

Hope that helps. Feel free to reach out if you need anything.

Best regards,
Jarek
Kale Support

Just for your record, these are the four fonts the theme loads and uses this styling:

Body: Lato, regular, 13px
Logo: Raleway, 200, 60px, uppercase
Tagline: Caveat, regular, 20px
Headings: Montserrat, 400, uppercase

I’ve been reading this and trying to change my font above my header graphic, along with the top menu and tag line. I’m using the Classy Lady theme and I love it. I just want to change the fonts. Not having any luck. I tried putting the custom CSS in and that didn’t do it. What do I need to edit to fix this?

This is my website, if you need a look. https://mariealline.com

Thank you,
Marie Alline

Hello @mariealline

That’s not our theme. You can contact the author of the theme that you are using.

Thanks!

Hello!

And thanks for a great theme. ??

If you look at our site using a mobile device, you can see the header (AURINKOMYRSKY) breaks the layout. Would there be an easy way to make the font a little smaller for mobile devices? Unfortunately, we are not CSS-savvy…

https://aurinkomyrsky.net

Thanks in advance. ??

Hi @potku,

Please try to add this css to Appearance → Customize → Additional CSS:

@media (max-width:767px){
    .logo .header-logo-text a {font-size: 18px !important;}
}

Adjust font size as you wish.

Hope that helps.

Best

Yeah! That did it. Thanks a lot, Jarek. ??

Hello @potku,

I am glad it is working out for you ??

Would you please take some time out from your busy day to leave us a quick review?
We’d really appreciate it ??

How do I change the font “size” smaller in right hand menu please
take a look at elvispresleynews.com thanks

Hi @elvispresleynews,

It seems you are using GeneratePress theme, not Kale theme. Please contact with theme author to get help.

Kind regards

hello,

i want to change the font size of the Menu bar, such as Home, About, Contact us. what is the css code i add? thanx in advance.

Hi @alexdanaci.

Could you please start a new topic in order to keep this one marked as “resolved” clean.

We’ll be glad to help you in the new one.

Kind regards.