Change Site Title & Tagline Font to a different one using CSS

Travelify
1

Is there a way to change the site title and tagline’s font? I have tried to adjust it in: Appearance -> Theme Options -> Other -> Custom CSS but it didn’t seem to accept the changes.

I am also not clear what the difference between editing CSS in this section vs. editing it in Appearance -> Edit CSS?

Thanks!

2

Hi @wewtraveler,

I hope you are well today and thank you for your question.

Is there a way to change the site title and tagline’s font?

You can change the site title and tagline’s font by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS


h1#site-title {
  font-family: monospace;
}

h2#site-description {
  font-family: serif;
}

Change the font family in the above code to what you want to use.

I have used this CSS code on my test site and it worked fine for me.

I have tried to adjust it in: Appearance -> Theme Options -> Other -> Custom CSS but it didn’t seem to accept the changes.
What CSS code have you added in the Custom CSS option and what do you mean by "it didn’t seem to accept the changes"?
I am also not clear what the difference between editing CSS in this section vs. editing it in Appearance -> Edit CSS?
Both are same and do the same work but the only difference is that Custom CSS option is provided by the Travelify so that you don't have to use any other plugin to use this option. The Edit CSS option is provided by some plugin that you are using on your site like Jetpack plugin and its custom CSS module.

Best Regards,
Movin

3

Thank you, Movin! I appreciate your help.

I was using the Editor, not sure if it was a plug in or not, but I was going to Editor and then going to the main CSS document to edit it there.

I got it to work correctly using the Custom CSS, which I assume is where I should make any CSS changes as it is provided by the Travelify theme.

Thanks again for your help!

4

You are most welcome here :slight_smile: