Snigdha-OS.github.io/src/assets/scss/base/_font.scss

// | -------------------------------------------------------------
// | Font
// | -------------------------------------------------------------

@use 'breakpoint' as *;

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url('/fonts/OpenSans-ExtraBold.woff2') format('woff2'),
    url('/fonts/OpenSans-ExtraBold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('/fonts/OpenSans-Bold.woff2') format('woff2'),
    url('/fonts/OpenSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url('/fonts/OpenSans-Italic.woff2') format('woff2'),
    url('/fonts/OpenSans-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/fonts/OpenSans-Regular.woff2') format('woff2'),
    url('/fonts/OpenSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-family-default);
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  a:not(.button) {
    color: var(--action-color);
    text-decoration: underline;

    &:visited {
      color: var(--action-color);
    }

    &:hover,
    &:focus {
      color: var(--action-color-state);
      text-decoration: none;
    }
  }

  :where(main) a {
    word-wrap: break-word;
    word-break: break-word;
  }

  :where(h1, h2) {
    font-family: var(--font-family-special);
  }

  h1,
  h2 {
    font-weight: 800;
  }

  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
  }

  h1 {
    font-size: 2.25rem;
    line-height: 3.375rem;

    @include breakpoint(medium) {
      font-size: 3rem;
      line-height: 3.625rem;
    }
  }

  h2 {
    font-size: 1.875rem;
    line-height: 2.8125rem;

    @include breakpoint(medium) {
      font-size: 2.25rem;
      line-height: 3.375rem;
    }
  }

  h3 {
    font-size: 1.5rem;
    line-height: 2.25rem;

    @include breakpoint(medium) {
      font-size: 1.875rem;
      line-height: 2.8125rem;
    }
  }

  h4 {
    font-size: 1.25rem;
    line-height: 1.875rem;

    @include breakpoint(medium) {
      font-size: 1.5rem;
      line-height: 2.25rem;
    }
  }

  h5 {
    font-size: 1.125rem;
    line-height: 1.6875rem;

    @include breakpoint(medium) {
      font-size: 1.25rem;
      line-height: 1.875rem;
      h6 {
        font-size: 1rem;
      }
    }

    line-height: 1.5rem;

    @include breakpoint(medium) {
      font-size: 1.125rem;
      line-height: 1.6875rem;
    }
  }
}