@mixin fontPoppins($size: 16px) {
  font-family: 'Poppins', sans-serif;
  font-size: $size;
}

@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  src: local('Poppins-Regular'),
    url(../../fonts/Poppins/Poppins-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  src: local('Poppins-Medium'),
    url(../../fonts/Poppins/Poppins-Medium.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  src: local('Poppins-SemiBold'),
    url(../../fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  src: local('Poppins-Bold'),
    url(../../fonts/Poppins/Poppins-Bold.ttf) format('truetype');
}

.ff-text {
  @include fontPoppins();

  &--regular {
    font-weight: 400;
  }
  &--medium {
    font-weight: 500;
  }
  &--semi-bold {
    font-weight: 600;
  }
  &--bold {
    font-weight: 700;
  }
}