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";

Another method is described in the MDCv2 developer documentation:

@use "@material/typography" with (
  $font-family: unquote("Arial, Helvetica, sans-serif")
);

This method leverages Sass module variables.

Answer 2

If you don't want to use SASS, you can do some basic customisation by setting variables in your css. For example:

<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="/assets/css/site.css" />

site.css

:root {
    --mdc-typography-font-family: 'Nunito Sans', sans-serif;
}

body {
    font-family: var(--mdc-typography-font-family);
}

You can also override the default theme colours using variables like this:

--mdc-theme-primary: #0d46a0;

More info can be found here: https://material.io/develop/web/docs/theming