Change Mat Option Font Family for Mat Select - Angular Material

Question

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 (eg 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"

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

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

Answer 1

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