@font-face {
    font-family: 'SFUIDisplay';
    src: url('fonts/SFUIDisplayBold.eot');
    src: url('fonts/SFUIDisplayBold.eot') format('embedded-opentype'),
         url('fonts/SFUIDisplayBold.woff2') format('woff2'),
         url('fonts/SFUIDisplayBold.woff') format('woff'),
         url('fonts/SFUIDisplayBold.ttf') format('truetype'),
         url('fonts/SFUIDisplayBold.svg#SFUIDisplayBold') format('svg');
    font-weight: 700;
}
@font-face {
    font-family: 'SFUIDisplay';
    src: url('fonts/SFUIDisplayMedium.eot');
    src: url('fonts/SFUIDisplayMedium.eot') format('embedded-opentype'),
         url('fonts/SFUIDisplayMedium.woff2') format('woff2'),
         url('fonts/SFUIDisplayMedium.woff') format('woff'),
         url('fonts/SFUIDisplayMedium.ttf') format('truetype'),
         url('fonts/SFUIDisplayMedium.svg#SFUIDisplayMedium') format('svg');
    font-weight: 500;
}
@font-face {
    font-family: 'SFUIDisplay';
    src: url('fonts/SFUIDisplayRegular.eot');
    src: url('fonts/SFUIDisplayRegular.eot') format('embedded-opentype'),
         url('fonts/SFUIDisplayRegular.woff2') format('woff2'),
         url('fonts/SFUIDisplayRegular.woff') format('woff'),
         url('fonts/SFUIDisplayRegular.ttf') format('truetype'),
         url('fonts/SFUIDisplayRegular.svg#SFUIDisplayRegular') format('svg');
    font-weight: 400;
}
@font-face {
    font-family: 'SFUIDisplay';
    src: url('fonts/SFUIDisplayUltralight.eot');
    src: url('fonts/SFUIDisplayUltralight.eot') format('embedded-opentype'),
         url('fonts/SFUIDisplayUltralight.woff2') format('woff2'),
         url('fonts/SFUIDisplayUltralight.woff') format('woff'),
         url('fonts/SFUIDisplayUltralight.ttf') format('truetype'),
         url('fonts/SFUIDisplayUltralight.svg#SFUIDisplayUltralight') format('svg');
    font-weight: 300;
}