@font-face {
  font-family: 'Pages Grotesque';
  src: url('../fonttest/pagesgrotesque/Pages_Grotesque_Light_Demo.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pages Grotesque';
  src: url('../fonttest/pagesgrotesque/Pages_Grotesque_Light_Italic_Demo.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Pages Grotesque';
  src: url('../fonttest/pagesgrotesque/Paque_Grotesque_Thin_Demo.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Pages Grotesque';
  src: url('../fonttest/pagesgrotesque/Paque_Grotesque_Thin_Italic_Demo.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'Pages Grotesque';
  src: url('../fonttest/pagesgrotesque/Pages_Grotesque_Regular_Demo.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pages Grotesque';
  src: url('../fonttest/pagesgrotesque/Pages_Grotesque_Italic_Demo.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Pages Grotesque';
  src: url('../fonttest/pagesgrotesque/Pages_Grotesque_Bold_Demo.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Pages Grotesque';
  src: url('../fonttest/pagesgrotesque/Pages_Grotesque_Bold_Italic_Demo.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Pages Grotesque';
  src: url('../fonttest/pagesgrotesque/Pages_Grotesque_Black_Demo.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Pages Grotesque';
  src: url('../fonttest/pagesgrotesque/Pages_Grotesque_Black_Italic_Demo.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}