CODEWITHSUNDEEP
material-componentsmaterial-components-web
Ronnie Smith
Ronnie Smith

Reputation: 18565

MDC-Web Typography: Font Customization

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.

Upvotes: 7

Views: 4627

Answers (2)

Rustem Gareev
Rustem Gareev

Reputation: 814

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.

Upvotes: 8

phil_rawlings
phil_rawlings

Reputation: 1263

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

Upvotes: 3

Related Questions