@font-face {
    font-family: 'circularxx';
    src: url('/themes/custom/inst/fonts/circularxx/CircularXX-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  } 
  
  @font-face {
    font-family: 'circularxx';
    src: url('/themes/custom/inst/fonts/circularxx/CircularXX-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'circularxx';
    src: url('/themes/custom/inst/fonts/circularxx/CircularXX-LightItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
    
  @font-face {  
    font-family: 'circularxx';
    src: url('/themes/custom/inst/fonts/circularxx/CircularXX-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'circularxx';
    src: url('/themes/custom/inst/fonts/circularxx/CircularXX-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap; 
  }
  
  @font-face {
    font-family: 'circularxx';  
    src: url('/themes/custom/inst/fonts/circularxx/CircularXX-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'circularxx';
    src: url('/themes/custom/inst/fonts/circularxx/CircularXX-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }