0

How Can I change the fonts-family in the label and the options of an mat-select and mat-input Material angular 5 ?

i tried to apply the style directly on the elements mat-select and input but nothing worked for me.

myform-component.html 

<mat-form-field class="col-sm-2 col-4">
  <mat-select style="font-family: 'GE-Flow-Bold', sans-serif; font-size:12px" [ngModel]="selectedCivilite" formControlName='civiliteAr' (ngModelChange)="civiliteChanged($event)" placeholder="اللقب" >
    <mat-option style="font-family: 'GE-Flow-Bold', sans-serif; font-size:12px" [value]="v" *ngFor='let v of listCiviliteAr , index as i '>
      {{ v }}
    </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field  class="col-sm-5 col-8 arabic-text">
  <input style="font-family: 'GE-Flow-Bold', sans-serif; font-size:12px"  matInput formControlName='nomAr' placeholder="الإسم الشخصي" >
  <mat-error *ngIf="form.get('nomAr').invalid">{{getErrorNameArMessage()}}</mat-error>
</mat-form-field>
NullPointerException
  • 49
  • 1
  • 7

1 Answers1

0

Adding this style to the mat-form-field

font-family: 'GE-Flow-Bold', sans-serif

Should do the trick. Keep in mind that the font must be loaded so it is available for your application.

alsami
  • 8,996
  • 3
  • 25
  • 36
  • Then you don't have the font loaded in your application. Change it to font-family: 'Helvetica', 'Arial', sans-serif; and you will see that the font is changing bc every browser (usually) knows this font. – alsami Mar 09 '18 at 11:29
  • The font is loaded in the app; it appears in other places like paragraphs – NullPointerException Mar 09 '18 at 12:00