A quick nerdy post that may help someone in the future. I wanted to modify the WordPress Twenty Sixteen Theme for this site to change the fonts and then add some classes to handle some new features.
(like this nifty Amazon preview on the Extrospections page)
The layout of the css file isn’t the easiest to change, so I had to pull out all the classes that had the font-family properties and arrange them together.
Below is a skeleton for your child theme’s css. The first set is to change the two predominate fonts, the serif and san-serif choices. The next are the @media calls, if you’d like to add to (as I did) or alter the behavior as the site transitions from desktop to mobile.
/*
Theme Name:
Theme URI:
Description: Twenty Sixteen Child Theme
Author:
Author URI:
Template: twentysixteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: twenty-sixteen-child
*/
/*Typography*/
/*Serif */
body,
button,
input,
select,
textarea {
/* change font family here */
}
/*Sans-Serif*/
.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,
.widecolumn label,
.widecolumn .mu_register label {
/* change font family here */
}
/* Media levels in Twenty Sixteen */
/**
* 14.1 - >= 710px
*/
@media screen and (min-width: 44.375em) {
} /* media 710px */
/**
* 14.2 - >= 783px
*/
@media screen and (min-width: 48.9375em) {
} /* media 738px */
/**
* 14.3 - >= 910px
*/
@media screen and (min-width: 56.875em) {
} /* media 910px */
/**
* 14.4 - >= 985px
*/
@media screen and (min-width: 61.5625em) {
} /* media 985px */