@font-face {
  font-family: 'SF';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/SF-Regular.woff2') format('woff2'), url('../fonts/SF-Regular.ttf') format('truetype'), url('../images/SF-Regular.svg') format('svg');

}
@font-face {
  font-family: 'SF';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/SF-Italic.woff2') format('woff2'), url('../fonts/SF-Italic.ttf') format('truetype'), url('../images/SF-Italic.svg') format('svg');
}
@font-face {
  font-family: 'SF';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/SF-Bold.woff2') format('woff2'), url('../fonts/SF-Bold.ttf') format('truetype'), url('../images/SF-Bold.svg') format('svg');
}
@font-face {
  font-family: 'SF';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/SF-BoldItalic.woff2') format('woff2'), url('../fonts/SF-BoldItalic.ttf') format('truetype'), url('../images/SF-BoldItalic.svg') format('svg');
}