@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    src:
      url('/public/fonts/noto-sans/NotoSans-VariableFont_wdth,wght.woff2') format('woff2') tech('variations'),
      url('/public/fonts/noto-sans/NotoSans-VariableFont_wdth,wght.woff2') format('woff2-variations'),
      url('/public/fonts/noto-sans/NotoSans-VariableFont_wdth,wght.ttf') format('truetype') tech('variations'),
      url('/public/fonts/noto-sans/NotoSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 200 900;
    font-stretch: 75% 125%;
  }

  @font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    src:
      url('/public/fonts/noto-sans/NotoSans-Italic-VariableFont_wdth,wght.woff2') format('woff2') tech('variations'),
      url('/public/fonts/noto-sans/NotoSans-Italic-VariableFont_wdth,wght.woff2') format('woff2-variations'),
      url('/public/fonts/noto-sans/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype') tech('variations'),
      url('/public/fonts/noto-sans/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 200 900;
    font-stretch: 75% 125%;
  }
}

@supports not (font-variation-settings: normal) {

  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-ExtraLight.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-ExtraLight.ttf') format('truetype');
    font-weight: 200;
  }
  @font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-ExtraLightItalic.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
  }

  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-Light.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-Light.ttf') format('truetype');
    font-weight: 300;
  }
  @font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-LightItalic.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
  }

  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-Regular.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-Regular.ttf') format('truetype');
    font-weight: 400;
  }
  @font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-Italic.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-Italic.ttf') format('truetype');
    font-weight: 400;
  }

  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-Medium.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-Medium.ttf') format('truetype');
    font-weight: 500;
  }
  @font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-MediumItalic.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
  }

  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-SemiBold.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
  }
  @font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-SemiBoldItalic.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
  }

  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-Bold.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-Bold.ttf') format('truetype');
    font-weight: 700;
  }
  @font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-BoldItalic.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
  }

  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-ExtraBold.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
  }
  @font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-ExtraBoldItalic.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
  }

  @font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-Black.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-Black.ttf') format('truetype');
    font-weight: 900;
  }
  @font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    src:
      url('/public/fonts/noto-sans/static/NotoSans-BlackItalic.woff2') format('woff2'),
      url('/public/fonts/noto-sans/static/NotoSans-BlackItalic.ttf') format('truetype');
    font-weight: 900;
  }

}