@font-face {
  font-family: 'Tajawal';
  src: url('/fonts/arabic/Tajawal-Bold.woff2') format('woff2'),
      url('/fonts/arabic/Tajawal-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Tajawal';
  src: url('/fonts/arabic/Tajawal-Regular.woff2') format('woff2'),
      url('/fonts/arabic/Tajawal-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Tajawal';
  src: url('/fonts/arabic/Tajawal-Medium.woff2') format('woff2'),
      url('/fonts/arabic/Tajawal-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'BalooBhaijaan';
  src: url('/fonts/arabic/BalooBhaijaan-Regular.woff2') format('woff2'),
      url('/fonts/arabic/BalooBhaijaan-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url('/fonts/arabic/RobotoMono-Regular.woff2') format('woff2'),
      url('/fonts/arabic/RobotoMono-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html:lang(ar), html:lang(fa) {
  font-family: Tajawal, sans-serif;

  .v-application {
    font-family: Tajawal, sans-serif;

    & .headline, & .title {
      font-family: Tajawal, sans-serif !important;
    }

    &.v-application--is-rtl {
      h1, h2, h3, h4, h5, h6 {
        font-family: BalooBhaijaan, sans-serif;
        font-weight: normal;
      }
    }
  }
}