@font-face {
    font-family: 'SFProDisplay';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('SF-Pro-Display-Regular.otf');
}

@font-face {
    font-family: 'SFProDisplay';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('SF-Pro-Display-Medium.otf');
}

@font-face {
    font-family: 'SFProDisplay';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('SF-Pro-Display-Semibold.otf');
}

@font-face {
    font-family: 'SFProDisplay';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('SF-Pro-Display-Bold.otf');
}

@font-face {
    font-family: 'SFProText';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('SF-Pro-Text-Regular.otf');
}

@font-face {
    font-family: 'SFProText';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('SF-Pro-Text-Medium.otf');
}

@font-face {
    font-family: 'SFProText';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('SF-Pro-Text-Semibold.otf');
}

/* Material icons */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('material-design-icons-3.0.1/MaterialIcons-Regular.eot'); /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIcons-Regular'),
        url('material-design-icons-3.0.1/MaterialIcons-Regular.woff2')
            format('woff2'),
        url('material-design-icons-3.0.1/MaterialIcons-Regular.woff')
            format('woff'),
        url('material-design-icons-3.0.1/MaterialIcons-Regular.ttf')
            format('truetype');
}