0

I noticed that fonts are specified in so many different locations in style.css of for example the TwentySixteen theme.

.widget .widget-title. .site-title. .entry-footer. .site-footer .site-title:after .... and many others! All of them Montserrat. All of them having to be overwritten if I fancy using something different in my child theme...

When I am writing my own css, I usually just specify the font for the body tag and it inherits.

Presumably though, there is a good reason why Wordpress default themes specify the font in so many places, so that child themers must play Hunt The Font. What is that reason?

3
  • why not to ask the developer, unless the question is just a rant ;) Commented Jan 19, 2016 at 17:16
  • Well, because I googled, didn't get an answer, and thought, maybe other people would like to know this too? I am not intending this as a rant, honestly - I suspect there's a best-practice issue here that I don't understand! Obviously I could ask the developer, but that would only educate me.
    – Victoria
    Commented Jan 19, 2016 at 17:27
  • It might be that the LESS or whatever the cool kids use for CSS today generates things that way, it can be personal preference. Most coding standarts are personal preference in the end. Commented Jan 19, 2016 at 18:39

2 Answers 2

1

There's not a universal standard for this. The precedents that the core Themes are setting are incidental to rebuilding and innovating. They are not by design.

They define font families for the Editor in the back end to establish a consistent feeling for content.

Source: https://github.com/WordPress/twentysixteen/blob/master/css/editor-style.css

Within the actual main styling of the Theme, there are 37 font family definitions.

They implement Normalize, font icons, then they begin setting baseline font families for edge case content. This happens at the beginning of their typography section.

Edge case styling is important because plugins and user modifications may bring content outside of the expected scope you were styling within, and thus causing inconsistent styling. By setting defaults outside of the normal scopes you can ensure a baseline of consistency.

Some font family specifications are there because of browser hinderances. Like here: https://github.com/WordPress/twentysixteen/blob/master/style.css#L547

Those specific rules won't be cross browser compatible unless they are overly verbose.

That's done in many areas.

In addition to all of the above, the core Theme developer still has to combat default WordPress core styling. Themes have a requirement around using certain classes and supporting certain class styling, so they need to add styling for that stuff as well.

At the end of the day, they through it where they thought they needed it, and some of it might be extraneous and that's entirely acceptable.

0

It is basically because TwentySixteen uses two different fonts Merriweather as a general site font and body text and Montserrat for specific parts like logo, title, etc...

Merriweather for fallback general and body text:

 /**
 * 3.0 - Typography
 */

 body,
 button,
 input,
 select,
 textarea {
     color: #1a1a1a;
     font-family: Merriweather, Georgia, serif;
     font-size: 16px;
     font-size: 1rem;
     line-height: 1.75;
 }

Montserrat for specific parts:

.widget .widget-title {
    font-family: Montserrat, "Helvetica Neue", sans-serif;
    font-size: 16px;
    font-size: 1rem;
    letter-spacing: 0.046875em;
    line-height: 1.3125;
    margin: 0 0 1.75em;
    text-transform: uppercase;
}

Basically you will need to overwrite the font-family rule on every specific tag you want to change the font in.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.