Font Family issue inside ion input

Ionic Framework
1

Hey Everyone,

Due to designer request I had to change font family and size inside an ion input.

And now I currently face an issue where my ion-input wont show typed text when I’m on Safari and partially using Chrome on a Mac.

After a bit of search I’ve notice that adding a custom font seems to break ion input.

Does anyone have a solution or a tweak to pass this problem or adding a custom font family for a ion input is impossible right now ?

Using :

  • @ionic/angular 5.0.4
  • @ionic/core 5.0.4
  • Safari 12.0
  • Chrome on Mac

Pictures

  • Safari :
    image
  • Chrome :
    image
  • Expected :
    image

SCSS

div.form-item {
    margin: 15px 18px 0 18px;

    ion-label {
      height: 24px;
      font-family: Dosis;
      font-size: 14px;
      letter-spacing: 0;
      line-height: 24px;
      color: var(--ion-color-primary);
    }

    ion-input {
      max-height: 44px;

      &:before {
        content: '\0020';
        width: 4px;
        height: 44px;
        color: var(--ion-color-primary);
        border-radius: 3px 0 0 3px;
        background-color: #f4f4f4;
        transition: all 150ms ease-out;
      }

      &.has-focus {
        &:before {
          background-color: var(--ion-color-primary);
        }
      }

      &.ng-valid.has-focus {
        &:before {
          background-color: var(--ion-color-success) !important;
        }
      }

      &.ng-invalid.ng-touched {
        &:before {
          background-color: var(--ion-color-danger) !important;
        }
      }

      input {
        height: 14px;
        color: #292929;
        font-family: Gotham;
        font-size: 13px;
        font-weight: 300;
        letter-spacing: 0;
        line-height: 16px;
        margin-top: 13px;
        margin-bottom: 13px;

      }
    }
  }
}

HTML

<div class="form-item">
            <ion-label position="floating">Name</ion-label>
            <ion-input formControlName="name">
            </ion-input>
</div>