How To Change The Site Title & Description Text Font In Twenty Seventeen

The default site title and description texts have two variations. One for wider computer screens and one for narrows screens such as mobiles. The site title and description font text can be changed.

The default site title and description text.

A changed site title (description has not been changed).

Where and how to change the site title and description:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below.

The CSS code:

/* SITE TITLE */
/* Mobiles */
.site-title {
	font-family: Tahoma;
	font-size: 20px;
	text-transform: lowercase;
}

/* Computer screens */
@media screen and (min-width: 48em) {
.site-title {
	font-family: Tahoma;
	font-size: 40px;
	text-transform: lowercase;
	}
}

/* SITE DESCRIPTION */
/* Mobiles */
.site-description {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	line-height: 17px;
	text-transform: lowercase;
}
 
/* Computer screens */
@media screen and (min-width: 48em) {
.site-description {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 22px;
	line-height: 26px;
	text-transform: lowercase;
	}
}

Share this:

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.


Posted

in

by


Comments

3 responses to “How To Change The Site Title & Description Text Font In Twenty Seventeen”

  1. Peter Reck avatar
    Peter Reck

    FANTASTIC, Bharat!

  2. Peter Reck avatar
    Peter Reck

    1) AVAILABLE FONTS: The above CSS script example shows “Tahoma” as “font-family”. Is there a list somewhere, that indicates all fonts that are supported through Twentyseventeen (or where is the source that features the various fonts?

    2) Will the above script also apply to the “Tagline” (also referred to as site-description)?

    Thank you!

    Peter

    1. Bharat Karavadra avatar

      Peter,
      1) I do not know of a definitive list, however, there is a list of web safe font sets where you can use one font set that caters as best as possible for the variations of browsers and operating systems. You can see this list here https://www.w3schools.com/cssref/css_websafe_fonts.asp

      2) Yes, you can use similar CSS for the site-description. I have updated this post with an example that also uses the web-safe font set for Tahoma. Also note that I have changed the line-height (line spacing) for the site description.

      I hope that helps.

Leave a Reply

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

>