1

I am using material web components in my project and I would like to change the font family. I was going through their documentation and I have tried to do that by setting the variable in my sass file like this:

$mdc-typography-font-family: Comfortaa, sans-serif !default;

But, that didn't work, in the documentation it also says that sass mixin sets the font:

mdc-typography-base

How can I change the mixin to use a different font-family?

Rustem Gareev
  • 804
  • 1
  • 7
  • 14
Ludwig
  • 1,401
  • 13
  • 62
  • 125

1 Answers1

3

I figured this out by removing !default flag:

$mdc-typography-font-family: Comfortaa, sans-serif;

Also, don't forget to embed Google Fonts in the head tag:

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
Rustem Gareev
  • 804
  • 1
  • 7
  • 14
  • Nothing has changed for me in the project, everything still has Roboto font – Ludwig Jan 24 '18 at 09:18
  • What's your setup? How you're importing components? – Rustem Gareev Jan 24 '18 at 09:48
  • In my app.sass I am importing material web components like this ```@import 'material-components-web/material-components-web';``` and then below it I am importing the ```variables``` file where I have set the variable. – Ludwig Jan 24 '18 at 11:16
  • You should import variables first, and only then Material Components. – Rustem Gareev Jan 24 '18 at 12:13
  • How would that work, wouldn't then variable from material components override my variable? – Ludwig Jan 24 '18 at 12:39
  • You were right, I thought I would then override my variable with the material components if I would import material components after the variables file? – Ludwig Jan 24 '18 at 12:46
  • Sass works another way - it will take first variable declaration. Here're Sass variables explained on a similar question: https://stackoverflow.com/a/17090334/9180111 – Rustem Gareev Jan 24 '18 at 13:14