/* 
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.Noto-sans-<uniquifier> {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

*/

@font-face {
  font-family: 'PortadaText-Regular';
  src:  url('fonts/PortadaText-Regular.eot') format('eot'),
        url('fonts/PortadaText-Regular.svg') format('svg'), 
        url('fonts/PortadaText-Regular.woff') format('woff'),
        url('fonts/PortadaText-Regular.woff2') format('woff2');
    font-display: auto;
    font-weight: 400;
    font-style: normal;
}

@font-face {
  font-family: 'PortadaText-Italic';
  src:  url('fonts/PortadaText-Italic.eot') format('eot'),
        url('fonts/PortadaText-Italic.svg') format('svg'), 
        url('fonts/PortadaText-Italic.woff') format('woff'),
        url('fonts/PortadaText-Italic.woff2') format('woff2');
    font-display: auto;
    font-weight: 400;
    font-style: italic;
}

@font-face {
  font-family: 'PortadaText-Bold';
  src:  url('fonts/PortadaText-Bold.eot') format('eot'),
        url('fonts/PortadaText-Bold.svg') format('svg'), 
        url('fonts/PortadaText-Bold.woff') format('woff'),
        url('fonts/PortadaText-Bold.woff2') format('woff2');
    font-display: auto;
    font-weight: 700;
    font-style: normal;
}

@font-face {
  font-family: 'PortadaText-BoldItalic';
  src:  url('fonts/PortadaText-BoldItalic.eot') format('eot'),
        url('fonts/PortadaText-BoldItalic.svg') format('svg'), 
        url('fonts/PortadaText-BoldItalic.woff') format('woff'),
        url('fonts/PortadaText-BoldItalic.woff2') format('woff2');
    font-display: auto;
    font-weight: 700;
    font-style: italic;
}

@font-face {
  font-family: 'Portada-Bold';
  src:  url('fonts/Portada-Bold.eot') format('eot'),
        url('fonts/Portada-Bold.svg') format('svg'), 
        url('fonts/Portada-Bold.woff') format('woff'),
        url('fonts/Portada-Bold.woff2') format('woff2');
    font-display: auto;
    font-weight: 700;
    font-style: normal;
}

@font-face {
  font-family: 'Portada-BoldItalic';
  src:  url('fonts/Portada-BoldItalic.eot') format('eot'),
        url('fonts/Portada-BoldItalic.svg') format('svg'), 
        url('fonts/Portada-BoldItalic.woff') format('woff'),
        url('fonts/Portada-BoldItalic.woff2') format('woff2');
    font-display: auto;
    font-weight: 700;
    font-style: italic;
}

@font-face {
  font-family: 'Portada-Extrabold';
  src:  url('fonts/Portada-Extrabold.eot') format('eot'),
        url('fonts/Portada-Extrabold.svg') format('svg'), 
        url('fonts/Portada-Extrabold.woff') format('woff'),
        url('fonts/Portada-Extrabold.woff2') format('woff2');
    font-display: auto;
    font-weight: 800;
    font-style: normal;
}

@font-face {
  font-family: 'Portada-ExtraboldItalic';
  src:  url('fonts/Portada-ExtraboldItalic.eot') format('eot'),
        url('fonts/Portada-ExtraboldItalic.svg') format('svg'), 
        url('fonts/Portada-ExtraboldItalic.woff') format('woff'),
        url('fonts/Portada-ExtraboldItalic.woff2') format('woff2');
    font-display: auto;
    font-weight: 800;
    font-style: italic;
}

@font-face {
  font-family: 'Portada-Italic';
  src:  url('fonts/Portada-Italic.eot') format('eot'),
        url('fonts/Portada-Italic.svg') format('svg'), 
        url('fonts/Portada-Italic.woff') format('woff'),
        url('fonts/Portada-Italic.woff2') format('woff2');
    font-display: auto;
    font-weight: 400;
    font-style: italic;
}

@font-face {
  font-family: 'Portada-Light';
  src:  url('fonts/Portada-Light.eot') format('eot'),
        url('fonts/Portada-Light.svg') format('svg'), 
        url('fonts/Portada-Light.woff') format('woff'),
        url('fonts/Portada-Light.woff2') format('woff2');
    font-display: auto;
    font-weight: 300;
    font-style: normal;
}

@font-face {
  font-family: 'Portada-LightItalic';
  src:  url('fonts/Portada-LightItalic.eot') format('eot'),
        url('fonts/Portada-LightItalic.svg') format('svg'), 
        url('fonts/Portada-LightItalic.woff') format('woff'),
        url('fonts/Portada-LightItalic.woff2') format('woff2');
    font-display: auto;
    font-weight: 300;
    font-style: italic;
}

@font-face {
  font-family: 'Portada-Regular';
  src:  url('fonts/Portada-Regular.eot') format('eot'),
        url('fonts/Portada-Regular.svg') format('svg'), 
        url('fonts/Portada-Regular.woff') format('woff'),
        url('fonts/Portada-Regular.woff2') format('woff2');
    font-display: auto;
    font-weight: 400;
    font-style: normal;
}

@font-face {
  font-family: 'Portada-Semibold';
  src:  url('fonts/Portada-Semibold.eot') format('eot'),
        url('fonts/Portada-Semibold.svg') format('svg'), 
        url('fonts/Portada-Semibold.woff') format('woff'),
        url('fonts/Portada-Semibold.woff2') format('woff2');
    font-display: auto;
    font-weight: 600;
    font-style: normal;
}

@font-face {
  font-family: 'Portada-SemiboldItalic';
  src:  url('fonts/Portada-SemiboldItalic.eot') format('eot'),
        url('fonts/Portada-SemiboldItalic.svg') format('svg'), 
        url('fonts/Portada-SemiboldItalic.woff') format('woff'),
        url('fonts/Portada-SemiboldItalic.woff2') format('woff2');
    font-display: auto;
    font-weight: 600;
    font-style: italic;
}

@font-face {
  font-family: 'Portada-Thin';
  src:  url('fonts/Portada-Thin.eot') format('eot'),
        url('fonts/Portada-Thin.svg') format('svg'), 
        url('fonts/Portada-Thin.woff') format('woff'),
        url('fonts/Portada-Thin.woff2') format('woff2');
    font-display: auto;
    font-weight: 200;
    font-style: normal;
}

@font-face {
  font-family: 'Portada-ThinItalic';
  src:  url('fonts/Portada-ThinItalic.eot') format('eot'),
        url('fonts/Portada-ThinItalic.svg') format('svg'), 
        url('fonts/Portada-ThinItalic.woff') format('woff'),
        url('fonts/Portada-ThinItalic.woff2') format('woff2');
    font-display: auto;
    font-weight: 200;
    font-style: italic;
}