@font-face {
    font-family: 'Roc Grotesk Wide';
    src: url('RocGrotesk-WideMedium.eot');
    src: url('RocGrotesk-WideMedium.eot?#iefix') format('embedded-opentype'),
        url('RocGrotesk-WideMedium.woff2') format('woff2'),
        url('RocGrotesk-WideMedium.woff') format('woff'),
        url('RocGrotesk-WideMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Roc Grotesk ExtraWide';
    src: url('RocGrotesk-ExtraWide.eot');
    src: url('RocGrotesk-ExtraWide.eot?#iefix') format('embedded-opentype'),
        url('RocGrotesk-ExtraWide.woff2') format('woff2'),
        url('RocGrotesk-ExtraWide.woff') format('woff'),
        url('RocGrotesk-ExtraWide.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Roc Grotesk ExtraWide';
    src: url('RocGrotesk-ExtraWideMedium.eot');
    src: url('RocGrotesk-ExtraWideMedium.eot?#iefix') format('embedded-opentype'),
        url('RocGrotesk-ExtraWideMedium.woff2') format('woff2'),
        url('RocGrotesk-ExtraWideMedium.woff') format('woff'),
        url('RocGrotesk-ExtraWideMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roc Grotesk Wide';
    src: url('RocGrotesk-Wide.eot');
    src: url('RocGrotesk-Wide.eot?#iefix') format('embedded-opentype'),
        url('RocGrotesk-Wide.woff2') format('woff2'),
        url('RocGrotesk-Wide.woff') format('woff'),
        url('RocGrotesk-Wide.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}