Change Title Color, Title Size and Title Font Family of 2017 Twenty Seventeen Theme

Last updated on June 26th, 2022 at 11:41 am

Twenty Seventeen is one of the most powerful free WordPress themes. Its innate simplicity makes it an easy to use theme.

However, some simple tasks like changing Twenty Seventeen’s title size, title color and title font family could be a difficult task if you’re not familiar with CSS.

In order to change these parameters for your site, do the following:

1. Log in to your WP Dashboard.

2. Click on Appearance > Customize.

3. Click on the Additional CSS option.

Now, depending on what exactly you want to change, do the following.

Change Twenty Seventeen Title Color

1. Once you open Additional CSS as per the previous 3 steps, paste the following code in it.

.site-title, .site-title a {
color: blue !important;
}

2. Click on the Save & Publish button on top in order to save the changes.

Refresh your home page to check the results.

Change Twenty Seventeen Title Size

1. Paste the following code snippet in Additional CSS.

.site-title, .site-title a {
font-size: 45px !important;
}

Don’t forget to change 45px to your preferred font size.

2. Click on the Save & Publish blue button. Refresh your home page so you can check the results.

Change Twenty Seventeen Title Font Family

1. Paste the following code in your Additional CSS section.

.site-title, .site-title a {
font-family: verdana !important;
}

You will need to know the exact name of the Font that you’d like to use for your site title of Twenty Seventeen.

2. Click on the Save & Publish blue button. Refresh your home page so you can check the results.

Congrats! You modified your Twenty Seventeen’s site title successfully.

Change Twenty Seventeen Title Color, Title Size and Title Font Family All at Once

If you need to change all of the three values for Title Color, Title Size and Title Font Family of Twenty Seventeen at the same time with one single code snippet, then use the following one instead.

.site-title, .site-title a {
color: blue !important;
font-family: verdana !important;
font-size: 45px !important;
}

Paste this code in your Additional CSS section and don’t forget to change the values according to your preferences.

Author: wpbackend

Content creator at wpbackend.com

Leave a Reply

Your email address will not be published. Required fields are marked *