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

  @font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    src:
      url('/public/fonts/noto-serif/NotoSerif-Italic-VariableFont_wdth,wght.woff2') format('woff2') tech('variations'),
      url('/public/fonts/noto-serif/NotoSerif-Italic-VariableFont_wdth,wght.woff2') format('woff2-variations'),
      url('/public/fonts/noto-serif/NotoSerif-Italic-VariableFont_wdth,wght.ttf') format('truetype') tech('variations'),
      url('/public/fonts/noto-serif/NotoSerif-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 Serif';
    font-style: normal;
    src:
      url('/public/fonts/noto-serif/static/NotoSerif-ExtraLight.woff2') format('woff2'),
      url('/public/fonts/noto-serif/static/NotoSerif-ExtraLight.ttf') format('truetype');
    font-weight: 200;
  }
  @font-face {
    font-family: 'Noto Serif';
    font-style: italic;
    src:
      url('/public/fonts/noto-serif/static/NotoSerif-ExtraLightItalic.woff2') format('woff2'),
      url('/public/fonts/noto-serif/static/NotoSerif-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
  }

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

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

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

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

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

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

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

}