@font-face {
  font-family: 'SFUIDisplay-Medium';
  src: url('SFUIDisplay-Medium.eot');
  src: url('SFUIDisplay-Medium.woff') format('woff'),
       url('SFUIDisplay-Medium.ttf') format('truetype'),
       url('SFUIDisplay-Medium.svg#SFUIDisplay-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SFUIDisplay-Regular';
  src: url('SFUIDisplay-Regular.eot');
  src: url('SFUIDisplay-Regular.woff') format('woff'),
       url('SFUIDisplay-Regular.ttf') format('truetype'),
       url('SFUIDisplay-Regular.svg#SFUIDisplay-Regular') format('svg'),
       url('SFUIDisplay-Regular.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'SFUIDisplay-Semibold';
  src: url('SFUIDisplay-Semibold.eot');
  src: url('SFUIDisplay-Semibold.woff') format('woff'),
       url('SFUIDisplay-Semibold.ttf') format('truetype'),
       url('SFUIDisplay-Semibold.svg#SFUIDisplay-Semibold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SFUIDisplay-Light';
  src: url('SFUIDisplay-Light.eot');
  src: url('SFUIDisplay-Light.woff') format('woff'),
       url('SFUIDisplay-Light.ttf') format('truetype'),
       url('SFUIDisplay-Light.svg#SFUIDisplay-Light') format('svg'),
       url('SFUIDisplay-Light.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}