angular - Change the Arabic fonts-family in the label and the options of an mat-select and mat-input Material angular 5

Question

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>