Changing the font style for Menu tab headings/Project headings - Sydney theme

Sydney
#1

Hello,

I have changed the font style on my website by using the google easy font plugin. I was able to use this plugin and changed the font through typography. I’m currently using font “Merienda” for the paragraph section and “Merienda One” for everything else. However, I don’t have an option to change the font style for the menu tab headings and categories (project) headings.

How can I change the font to “Merienda One” for the menu tabs and category tab headings?

Any help would be much appreciated.

Thanks!

#2

Hello there,

Add this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.project-filter li a {
  font-family: 'Merienda One', cursive;
}

Regards,
Kharis

#3

Again, Thank You very much. It worked!! However, I still need to be able to change the menu headings to as well. Can I do this?

Best, Bunngulz

#4

Hello there,

You can do this by adding the below CSS code:


#mainnav ul ul a,
#mainnav ul li a,
#mainnav-mobi ul ul a,
#mainnav-mobi ul li a {
   font-family: 'Merienda One', cursive; 
}

Regards,
Kharis

#5

Do I put this in the additional CSS? Sorry but I’m new and don’t know the difference between customizing the additional css vs. custom css.

thanks!

#6

Additional CSS in the native feature of WordPress added since version 4.7. This allows user to add custom CSS code on their site. Custom CSS works the same way though, but, I recommend you use the native feature.

Regards,
Kharis

#7

Thanks for the explanation and It worked…Yay!! Thank You Very Much!!

Sorry, but I have one more question. Is it possible to change the font to the same Merienda one to my call to action buttons?

#8

And one more thing… When I hover over the menu titles it is now a different color (red) then how I had it before. Is there a way to change it to my preferred color?

#9

Hello there,

To change the default font family of the call to action button, add this CSS code:


.roll-button {
  font-family: 'Merienda One', cursive; 
}

To change the menu item hover color, use this code:


#mainnav ul li a:hover {
  color: #fff000;  
}

Regards,
Kharis

#10

Thank you very much!! You have been extremely helpful!

#11

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis