Optimize font styling

[grappler]

While looking at #344 I saw there were multiple classes being used to define the header font styles.

This caused me to look at the default styles. For the heading styles we have loads of classes that have a custom header font. This does not seem very clean and organised.

twentynineteen/sass/typography/_headings.scss

Lines 1 to 20 in b5a5019

	.main-navigation,
	.page-description,
	h2.author-title,
	.author-description .author-link,
	.not-found .page-title,
	.error-404 .page-title,
	.post-navigation .post-title,
	.pagination .nav-links,
	.comments-title,
	.comment-author .fn,
	.no-comments,
	.site-title,
	h1, h2, h3, h4, h5, h6 {
	font-family: $font__heading;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: $font__line-height-heading;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	}

I am not a CSS expert but I feel we can optimise the CSS. For example do we need h2.author-title and h2 or .error-404 .page-title and .not-found .page-title where .page-title may suffice.

The font family is being defined twice for .page-description.

It should be nearly possible to just have.

h1, h2, h3, h4, h5, h6 {
	font-family: $font__heading;
}

[joyously]

Or, like in Twenty Seventeen,

html[lang="ar"] { 
    font-family: 'Arabic font', sans-serif;
}
html[lang="gr"] { 
    font-family: 'Greek font', sans-serif;
}

[grappler]

@joyously I mean in a general sense and not language specific.

[joyously]

I know, but why not? We did that in Twenty Seventeen.

[grappler]

I know, but why not? We did that in Twenty Seventeen.

The discussion for that should be done in #29

The point of this issue is reduce the number of classes used to define header fonts.

[allancole]

Yeah, I like this idea @grappler 👍 . The selectors could certainly be slimmed down in _typography.scss. Some of the additional selectors are there for overriding purposes, but if you wanna spin up a PR for this and I’ll gladly review/test…