Material: Override Roboto font with provider

Created on 6 Jan 2016 · 6Comments · Source: angular/material

Hi everyone,

I wanted to know if there is a way to override completely the default font Roboto ?
I looked for a provider to configure the default font but it seems that the font-familly attribute is hard-coded in the scss.

Could we imagine such a service ? I know that material design specifies only Roboto and Noto but it could be a great feature.
if not do you have a way to do so in my app ? (override css md-* {} etc ... ? )

Bye.

Source

ByJC

👍1

Most helpful comment

Just include a font-family override in your application stylesheets, which need to be included in your build _after_ your Angular Material dependencies. This is what I use and haven't had any issues:

body {
  font-family: "Comic Sans MS";
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

Demo: http://codepen.io/mattdanna/pen/pgwVzX

And don't worry, I'm not actually using Comic Sans in my app... ;)

mattdanna on 12 Jan 2016

👍5 👎1

All 6 comments

Anybody ?

sderosiaux on 11 Jan 2016

body {
  font-family: "Comic Sans MS";
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

Demo: http://codepen.io/mattdanna/pen/pgwVzX

And don't worry, I'm not actually using Comic Sans in my app... ;)

mattdanna on 12 Jan 2016

👍5 👎1

Hi @mattdanna !
Thank you for your reply and the codepen.
Currently that is what I did in my app and it works pretty well.
I was just looking for another way to handle thing.

ByJC on 12 Jan 2016

The codepen with Comic Sans MS is awesome!

shprink on 13 Jan 2016

button,select,html,textarea,input,md-bottom-sheet .md-subheader,.md-chips{ font-family: Roboto, "Helvetica Neue", sans-serif; } *:not(.fa){ font-family: BrandonRegular,sans-serif !important; }