CODEWITHSUNDEEP
cssangularangular-materialmat-form-fieldmat-select
the_overflowing_stack
the_overflowing_stack

Reputation: 261

Change Mat Option Font Family for Mat Select - Angular Material

I am attempting to change the font of the options inside mat-select ("In what city were you born", etc).

I noticed if I set ViewEncapsulation to none (e.g. let styles bleed in from other files), it does allow me to change the font family, but setting this to none causes other unwanted styles to bleed in even though I have these all set to ":host"

enter image description here

Note: I noticed when I change the font for this class in dev tools that it changes the font successfully:

enter image description here

However when I add the style to my css file and try it even with ng-deep, it still doesn't change the font.

Upvotes: 0

Views: 2401

Answers (1)

Collin
Collin

Reputation: 444

add this to your styles.css / styles.scss file in your Angular project:

.mat-option-text {
  font-size: 16px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

Upvotes: 0

Related Questions