How to change fonts for “Twenty Sixteen” child theme

Twentysixteen Theme Fonts

Here I will describe how to change fonts for “Twenty Sixteen” child theme in WordPress. This may be needed because of the default fonts incompatibility with the language that your website is using. Also this may solve issue when fonts have changed after installing Polylang plugin.

How “Twenty Sixteen” theme handles fonts

Theme font handling begins with loading the functions.php file in the function named twentysixteen_fonts_url() which returns valid Google fonts URL. This function is called along with other main CSS files and scripts when they are enqueued in twentysixteen_scripts() function and fired at “wp_enqueue_scripts” action hook. Then fonts are freely declared in the main CSS file.

Twentysixteen Theme Fonts
Twentysixteen WordPress Theme Fonts

twentysixteen_fonts_url() gives theme translators ability to enable or disable fonts by translating specific font string from “on” to “off” (short description provided for translators along with font name). So basically theme translators should check default theme fonts compatibility with the language. If font is disabled, theme uses fallback font which in my opinion looks a lot different. However, if font is mistakenly left enabled you may see the text where language specific characters (that are missing in the default font) will be displayed with fallback font.

How to override default fonts

I found that the easiest way to change default fonts is to override twentysixteen_fonts_url() function in your child theme’s functions.php file.

Below is the default twentysixteen_fonts_url() function, but without the conditional statements that turn fonts on or off. You can use it to set your own fonts.

  
  
function twentysixteen_fonts_url() {
  $fonts_url = '';
  $fonts = array();
  $subsets = 'latin,latin-ext';

  $fonts[] = 'Merriweather:400,700,900,400italic,700italic,900italic';
  $fonts[] = 'Montserrat:400,700';
  $fonts[] = 'Inconsolata:400';

  if ( $fonts ) {
    $fonts_url = add_query_arg( array(
      'family' => urlencode( implode( '|', $fonts ) ),
      'subset' => urlencode( $subsets ),
    ), 'https://fonts.googleapis.com/css' );
  }

  return $fonts_url;
}
  

In my case “Montserrat” and “Inconsolata” fonts were incompatible, so I changed them to “Merriweather Sans” and “Ubuntu Mono“.

  
  
$fonts[] = 'Merriweather:400,700,900,400italic,700italic,900italic';
$fonts[] = 'Merriweather Sans:400,700';
$fonts[] = 'Ubuntu Mono:400';
  

Just be sure to check that your chosen fonts support required characters (simply type them for preview in repository) and required styles like bold (700) or italic bold (700italic). Chose your font from Google Fonts or adjust the function to use other font repository.

Changing font declarations in CSS

Now when fonts are loaded it is time to re declare them in your child themes style.css file. I have gathered a list of declarations from the default themes style.css file and combined them into just a few declarations to change all at once. You can copy and paste the code to your CSS file and adjust “font-family” declarations at your needs.

  
  
body,
button,
input,
select,
textarea,
.required {
    font-family: Merriweather, Georgia, serif;
}

code,
kbd,
tt,
var,
samp,
pre,
.form-allowed-tags code {
    font-family: Inconsolata, monospace;
}
  
/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {
    font-family: Montserrat, "Helvetica Neue", sans-serif;
}

:-moz-placeholder {
    font-family: Montserrat, "Helvetica Neue", sans-serif;
}

::-moz-placeholder {
    font-family: Montserrat, "Helvetica Neue", sans-serif;
}

:-ms-input-placeholder {
    font-family: Montserrat, "Helvetica Neue", sans-serif;
}
  
button,
button[disabled]:hover,
button[disabled]:focus,
input[type="button"],
input[type="button"][disabled]:hover,
input[type="button"][disabled]:focus,
input[type="reset"],
input[type="reset"][disabled]:hover,
input[type="reset"][disabled]:focus,
input[type="submit"],
input[type="submit"][disabled]:hover,
input[type="submit"][disabled]:focus,
.post-password-form label,
.main-navigation,
.post-navigation,
.post-navigation .post-title,
.pagination,
.image-navigation,
.comment-navigation,
.site .skip-link,
.logged-in .site .skip-link,
.widget .widget-title,
.widget_recent_entries .post-date,
.widget_rss .rss-date,
.widget_rss cite,
.tagcloud a,
.site-title,
.entry-title,
.entry-footer,
.sticky-post,
.page-title,
.page-links,
.comments-title,
.comment-reply-title,
.comment-metadata,
.pingback .edit-link,
.comment-reply-link,
.comment-form label,
.no-comments,
.site-footer .site-title:after,
.widecolumn label,
.widecolumn .mu_register label {
    font-family: Montserrat, "Helvetica Neue", sans-serif;
}
 

How and Why change fonts dynamically

Sometimes you may need to switch fonts automatically along with the language as in case of multilingual website. One way is to find fonts that support all languages you need and use them as described above. Other way you will need to switch the correct fonts for specific language.

I’m using Polylang plugin to switch languages and here I will write about this specific case. I’m sure this may work with other plugins too, but you may need to modify something.

To pick correct fonts I’m using get_locale() function to get current language and then assigning fonts accordingly. The twentysixteen_fonts_url() function will look like this after modification.

  
  
function twentysixteen_fonts_url() {
  $fonts_url = '';
  $fonts = array();
  $subsets = 'latin,latin-ext';

  $locale = get_locale(); // example output: en_US

  if ($locale == 'lt_LT') {
    // Second language (Lithuanian)
    $fonts[] = 'Merriweather Sans:400,700';
    $fonts[] = 'Ubuntu Mono:400';
  } else {
    // Default language (English)
    $fonts[] = 'Montserrat:400,700';
    $fonts[] = 'Inconsolata:400';
  }

  $fonts[] = 'Merriweather:400,700,900,400italic,700italic,900italic';

  if ( $fonts ) {
    $fonts_url = add_query_arg( array(
      'family' => urlencode( implode( '|', $fonts ) ),
      'subset' => urlencode( $subsets ),
    ), 'https://fonts.googleapis.com/css' );
  }

  return $fonts_url;
}
  

Please note that in my case the “Merriweather” font works with both languages so I’m switching only other two.

Now in the CSS file I’m declaring fonts like this:

  
  
font-family: Default Language Font, Second Language Font, Fallback;
  

The working example:

  
  
/* serif font; no change for this one */
font-family: Merriweather, Georgia, serif;

/* sans serif font */
font-family: Montserrat, "Merriweather Sans", "Helvetica Neue", sans-serif;

/* monospace font */
font-family: Inconsolata, "Ubuntu Mono", monospace;
  

That’s it. Good luck.

One thought on “How to change fonts for “Twenty Sixteen” child theme”

  1. Thank you for taking the time to put together this helpful tutorial. It has been quite difficult trying to find proper information on changing the Google Fonts in a Child Theme of Twenty Sixteen. Thanks again!

Leave a Reply

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