@font-face {
  font-family: 'SF UI Display Ultralight';
  font-style: normal;
  font-weight: normal;
  src: local('SF UI Display Ultralight'), url('sf-ui-display-ultralight.woff') format('woff');
}

@font-face {
  font-family: 'SF UI Display Thin';
  font-style: normal;
  font-weight: normal;
  src: local('SF UI Display Thin'), url('sf-ui-display-thin.woff') format('woff');
}

@font-face {
  font-family: 'SF UI Display Light';
  font-style: normal;
  font-weight: normal;
  src: local('SF UI Display Light'), url('sf-ui-display-light.woff') format('woff');
}

@font-face {
  font-family: 'SF UI Display Medium';
  font-style: normal;
  font-weight: normal;
  src: local('SF UI Display Medium'), url('sf-ui-display-medium.woff') format('woff');
}

@font-face {
  font-family: 'SF UI Display Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('SF UI Display Semibold'), url('sf-ui-display-semibold.woff') format('woff');
}

@font-face {
  font-family: 'SF UI Display Bold';
  font-style: normal;
  font-weight: normal;
  src: local('SF UI Display Bold'), url('sf-ui-display-bold.woff') format('woff');
}

@font-face {
  font-family: 'SF UI Display Heavy';
  font-style: normal;
  font-weight: normal;
  src: local('SF UI Display Heavy'), url('sf-ui-display-heavy.woff') format('woff');
}

@font-face {
  font-family: 'SF UI Display Black';
  font-style: normal;
  font-weight: normal;
  src: local('SF UI Display Black'), url('sf-ui-display-black.woff') format('woff');
}