@font-face {
    font-family: 'Roc Grotesk';
    src: url('RocGrotesk-Black.woff2') format('woff2'),
        url('RocGrotesk-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Compressed';
    src: url('RocGrotesk-Compressed.woff2') format('woff2'),
        url('RocGrotesk-Compressed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk';
    src: url('RocGrotesk-Bold.woff2') format('woff2'),
        url('RocGrotesk-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Compressed ExBold';
    src: url('RocGrotesk-CompressedExtraBold.woff2') format('woff2'),
        url('RocGrotesk-CompressedExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Compressed ExLight';
    src: url('RocGrotesk-CompressedExtraLight.woff2') format('woff2'),
        url('RocGrotesk-CompressedExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Compressed';
    src: url('RocGrotesk-CompressedLight.woff2') format('woff2'),
        url('RocGrotesk-CompressedLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Compressed';
    src: url('RocGrotesk-CompressedBold.woff2') format('woff2'),
        url('RocGrotesk-CompressedBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Compressed';
    src: url('RocGrotesk-CompressedBlack.woff2') format('woff2'),
        url('RocGrotesk-CompressedBlack.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Compressed';
    src: url('RocGrotesk-CompressedHeavy.woff2') format('woff2'),
        url('RocGrotesk-CompressedHeavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Compressed';
    src: url('RocGrotesk-CompressedMedium.woff2') format('woff2'),
        url('RocGrotesk-CompressedMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Condensed';
    src: url('RocGrotesk-Condensed.woff2') format('woff2'),
        url('RocGrotesk-Condensed.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Condensed';
    src: url('RocGrotesk-CondensedBold.woff2') format('woff2'),
        url('RocGrotesk-CondensedBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Condensed';
    src: url('RocGrotesk-CondensedBlack.woff2') format('woff2'),
        url('RocGrotesk-CondensedBlack.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Condensed';
    src: url('RocGrotesk-CondensedExtraBold.woff2') format('woff2'),
        url('RocGrotesk-CondensedExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Compressed';
    src: url('RocGrotesk-CompressedThin.woff2') format('woff2'),
        url('RocGrotesk-CompressedThin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Condensed';
    src: url('RocGrotesk-CondensedThin.woff2') format('woff2'),
        url('RocGrotesk-CondensedThin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Condensed';
    src: url('RocGrotesk-CondensedHeavy.woff2') format('woff2'),
        url('RocGrotesk-CondensedHeavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Condensed';
    src: url('RocGrotesk-CondensedMedium.woff2') format('woff2'),
        url('RocGrotesk-CondensedMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Condensed ExLight';
    src: url('RocGrotesk-CondensedExtraLight.woff2') format('woff2'),
        url('RocGrotesk-CondensedExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Condensed';
    src: url('RocGrotesk-CondensedLight.woff2') format('woff2'),
        url('RocGrotesk-CondensedLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk';
    src: url('RocGrotesk-ExtraBold.woff2') format('woff2'),
        url('RocGrotesk-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk ExtraWide';
    src: url('RocGrotesk-ExtraWide.woff2') format('woff2'),
        url('RocGrotesk-ExtraWide.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk';
    src: url('RocGrotesk-ExtraLight.woff2') format('woff2'),
        url('RocGrotesk-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk ExtraWide';
    src: url('RocGrotesk-ExtraWideHeavy.woff2') format('woff2'),
        url('RocGrotesk-ExtraWideHeavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk ExtraWide';
    src: url('RocGrotesk-ExtraWideExtraBold.woff2') format('woff2'),
        url('RocGrotesk-ExtraWideExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk ExWide ExLight';
    src: url('RocGrotesk-ExtraWideExtraLight.woff2') format('woff2'),
        url('RocGrotesk-ExtraWideExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk ExtraWide';
    src: url('RocGrotesk-ExtraWideBold.woff2') format('woff2'),
        url('RocGrotesk-ExtraWideBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk ExtraWide';
    src: url('RocGrotesk-ExtraWideBlack.woff2') format('woff2'),
        url('RocGrotesk-ExtraWideBlack.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk ExtraWide';
    src: url('RocGrotesk-ExtraWideLight.woff2') format('woff2'),
        url('RocGrotesk-ExtraWideLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk ExtraWide';
    src: url('RocGrotesk-ExtraWideMedium.woff2') format('woff2'),
        url('RocGrotesk-ExtraWideMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}