@font-face {
font-family: SF-UI;
src: url("fonts/SF-UI-400.otf") format("opentype");
}

@font-face {
font-family: SF-UI;
font-weight: 100;
src: url("fonts/SF-UI-100.otf") format("opentype");
}
@font-face {
font-family: SF-UI;
font-weight: 200;
src: url("fonts/SF-UI-200.otf") format("opentype");
}
@font-face {
font-family: SF-UI;
font-weight: 300;
src: url("fonts/SF-UI-300.otf") format("opentype");
}
@font-face {
font-family: SF-UI;
font-weight: 400;
src: url("fonts/SF-UI-400.otf") format("opentype");
}
@font-face {
font-family: SF-UI;
font-weight: 500;
src: url("fonts/SF-UI-500.otf") format("opentype");
}
@font-face {
font-family: SF-UI;
font-weight: 600;
src: url("fonts/SF-UI-600.otf") format("opentype");
}
@font-face {
font-family: SF-UI;
font-weight: 700;
src: url("fonts/SF-UI-700.otf") format("opentype");
}
@font-face {
font-family: SF-UI;
font-weight: 800;
src: url("fonts/SF-UI-800.otf") format("opentype");
}
@font-face {
font-family: SF-UI;
font-weight: 900;
src: url("fonts/SF-UI-900.otf") format("opentype");
}