@font-face {
    font-family: 'SF Pro Display';
    src: url('./SF-Pro-Display-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Display';
    src: url('./SF-Pro-Display-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Display';
    src: url('./SF-Pro-Display-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Display';
    src: url('./SF-Pro-Display-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
  }

  @font-face {
    font-family: 'SF Pro Display';
    src: url('./SF-Pro-Display-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'SF Pro Display';
    src: url('./SF-Pro-Display-SemiboldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
  }
  @font-face {
    font-family: 'SF Pro Text';
    src: url('./SF-Pro-Text-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Text';
    src: url('./SF-Pro-Text-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Text';
    src: url('./SF-Pro-Text-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
  }
  
  /* Italic Variants */
  @font-face {
    font-family: 'SF Pro Text';
    src: url('./SF-Pro-Text-RegularItalic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'SF Pro Text';
    src: url('./SF-Pro-Text-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
  }
  @font-face {
    font-family: 'SF Pro Rounded';
    src: url('./SF-Pro-Rounded-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Rounded';
    src: url('./SF-Pro-Rounded-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'SF Pro Rounded';
    src: url('./SF-Pro-Rounded-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
  }