/* Thin (100) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-Thin.eot');
    src: url('NoiGrotesk-Thin.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-Thin.woff2') format('woff2'),
         url('NoiGrotesk-Thin.woff') format('woff'),
         url('NoiGrotesk-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Thin Italic (100) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-ThinItalic.eot');
    src: url('NoiGrotesk-ThinItalic.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-ThinItalic.woff2') format('woff2'),
         url('NoiGrotesk-ThinItalic.woff') format('woff'),
         url('NoiGrotesk-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

/* UltraLight (200) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-UltraLight.eot');
    src: url('NoiGrotesk-UltraLight.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-UltraLight.woff2') format('woff2'),
         url('NoiGrotesk-UltraLight.woff') format('woff'),
         url('NoiGrotesk-UltraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* UltraLight Italic (200) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-UltraLightItalic.eot');
    src: url('NoiGrotesk-UltraLightItalic.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-UltraLightItalic.woff2') format('woff2'),
         url('NoiGrotesk-UltraLightItalic.woff') format('woff'),
         url('NoiGrotesk-UltraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

/* Light (300) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-Light.eot');
    src: url('NoiGrotesk-Light.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-Light.woff2') format('woff2'),
         url('NoiGrotesk-Light.woff') format('woff'),
         url('NoiGrotesk-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Light Italic (300) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-LightItalic.eot');
    src: url('NoiGrotesk-LightItalic.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-LightItalic.woff2') format('woff2'),
         url('NoiGrotesk-LightItalic.woff') format('woff'),
         url('NoiGrotesk-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* Regular (400) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-Regular.eot');
    src: url('NoiGrotesk-Regular.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-Regular.woff2') format('woff2'),
         url('NoiGrotesk-Regular.woff') format('woff'),
         url('NoiGrotesk-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Regular Italic (400) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-RegularItalic.eot');
    src: url('NoiGrotesk-RegularItalic.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-RegularItalic.woff2') format('woff2'),
         url('NoiGrotesk-RegularItalic.woff') format('woff'),
         url('NoiGrotesk-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium (500) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-Medium.eot');
    src: url('NoiGrotesk-Medium.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-Medium.woff2') format('woff2'),
         url('NoiGrotesk-Medium.woff') format('woff'),
         url('NoiGrotesk-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Medium Italic (500) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-MediumItalic.eot');
    src: url('NoiGrotesk-MediumItalic.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-MediumItalic.woff2') format('woff2'),
         url('NoiGrotesk-MediumItalic.woff') format('woff'),
         url('NoiGrotesk-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Semibold (600) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-Semibold.eot');
    src: url('NoiGrotesk-Semibold.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-Semibold.woff2') format('woff2'),
         url('NoiGrotesk-Semibold.woff') format('woff'),
         url('NoiGrotesk-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Semibold Italic (600) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-SemiboldItalic.eot');
    src: url('NoiGrotesk-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-SemiboldItalic.woff2') format('woff2'),
         url('NoiGrotesk-SemiboldItalic.woff') format('woff'),
         url('NoiGrotesk-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Bold (700) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-Bold.eot');
    src: url('NoiGrotesk-Bold.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-Bold.woff2') format('woff2'),
         url('NoiGrotesk-Bold.woff') format('woff'),
         url('NoiGrotesk-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Bold Italic (700) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-BoldItalic.eot');
    src: url('NoiGrotesk-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-BoldItalic.woff2') format('woff2'),
         url('NoiGrotesk-BoldItalic.woff') format('woff'),
         url('NoiGrotesk-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Black (900) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-Black.eot');
    src: url('NoiGrotesk-Black.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-Black.woff2') format('woff2'),
         url('NoiGrotesk-Black.woff') format('woff'),
         url('NoiGrotesk-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Black Italic (900) */
@font-face {
    font-family: 'Noi Grotesk';
    src: url('NoiGrotesk-BlackItalic.eot');
    src: url('NoiGrotesk-BlackItalic.eot?#iefix') format('embedded-opentype'),
         url('NoiGrotesk-BlackItalic.woff2') format('woff2'),
         url('NoiGrotesk-BlackItalic.woff') format('woff'),
         url('NoiGrotesk-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/*
 * Utility classes for easy font weight usage
 * You can use these classes or the font-weight property directly
 */
.noi-thin { font-weight: 100; }
.noi-ultralight { font-weight: 200; }
.noi-light { font-weight: 300; }
.noi-regular { font-weight: 400; }
.noi-medium { font-weight: 500; }
.noi-semibold { font-weight: 600; }
.noi-bold { font-weight: 700; }
.noi-black { font-weight: 900; }

.noi-italic { font-style: italic; }

/*
 * Example usage for body text
 * Uncomment and modify as needed
 */
/*
body {
    font-family: 'Noi Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
*/