MDC-Web Typography: Font Customization

Question

Is the MDC typography specific to the Roboto font, or can we implement with other Google fonts and if so, is the recommended way simply to apply the font-family CSS to body?

Lastly, it appears that all header elements are tied to the <h1> element which seems to break the semantic nature of HTML5, i.e. h1 normally has higher significance than h5.

Answer 1

MDC-Web is a customizable library, and given the fact that Google doesn't prohibit using your brand styles along with Material Design framework, you're free to use any font, not just "Roboto".

If you're using CSS-only approach, adding font-family to body is not enough: MDC-Web applies default typography styles (including font-family) to different components (e.g., mdc-button, mdc-list, mdc-card) and typography classes, and they still will have “Roboto” font applied. So, if you’re going to use such MDC-Web components and classes, you need to manually specify font-family for each of them:

.mdc-button {
  font-family: "Open Sans", sans-serif;
}

.mdc-list {
  font-family: "Open Sans", sans-serif;
}

.mdc-card__supporting-text {
  font-family: “Open Sans”, sans-serif;
}

But this might be tedious, so the recommended way to generate MDC-Web styling is to use Sass. Specifically, you need to override MDC-Web’s typography variable in your .scss file before importing the component:

$mdc-typography-font-family: "Open Sans", sans-serif;

@import "@material/typography/mdc-typography";