@font-face {
    font-family: "Spectral"; /* ExtraLight */
    font-style: normal;
    font-weight: 200;
    font-display: auto;
    src: url("Spectral-ExtraLight.woff2") format("woff2"),
        url("Spectral-ExtraLight.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* ExtraLight Italique */
    font-style: normal;
    font-weight: 200;
    font-display: auto;
    src: url("Spectral-ExtraLightItalic.woff2") format("woff2"),
        url("Spectral-ExtraLightItalic.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* Light */
    font-style: normal;
    font-weight: 300;
    font-display: auto;
    src: url("Spectral-Light.woff2") format("woff2"),
        url("Spectral-Light.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* Light Italique */
    font-style: italic;
    font-weight: 300;
    font-display: auto;
    src: url("Spectral-LightItalic.woff2") format("woff2"),
        url("Spectral-LightItalic.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* Regular */
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url("Spectral-Regular.woff2") format("woff2"),
        url("Spectral-Regular.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* Regular Italique */
    font-style: italic;
    font-weight: 400;
    font-display: auto;
    src: url("Spectral-Italic.woff2") format("woff2"),
        url("Spectral-Italic.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* Medium */
    font-style: normal;
    font-weight: 500;
    font-display: auto;
    src: url("Spectral-Medium.woff2") format("woff2"),
        url("Spectral-Medium.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* Medium italique */
    font-style: italic;
    font-weight: 500;
    font-display: auto;
    src: url("Spectral-MediumItalic.woff2") format("woff2"),
        url("Spectral-MediumItalic.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* SemiBold */
    font-style: normal;
    font-weight: 600;
    font-display: auto;
    src: url("Spectral-SemiBold.woff2") format("woff2"),
        url("Spectral-SemiBold.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* SemiBold italique */
    font-style: italic;
    font-weight: 600;
    font-display: auto;
    src: url("Spectral-SemiBoldItalic.woff2") format("woff2"),
        url("Spectral-SemiBoldItalic.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* Bold */
    font-style: normal;
    font-weight: 700;
    font-display: auto;
    src: url("Spectral-Bold.woff2") format("woff2"),
        url("Spectral-Bold.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* Bold italique */
    font-style: italic;
    font-weight: 700;
    font-display: auto;
    src: url("Spectral-BoldItalic.woff2") format("woff2"),
        url("Spectral-BoldItalic.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* ExtraBold */
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url("Spectral-ExtraBold.woff2") format("woff2"),
        url("Spectral-ExtraBold.woff") format("woff");
}

@font-face {
    font-family: "Spectral"; /* ExtraBold italique */
    font-style: italic;
    font-weight: 900;
    font-display: auto;
    src: url("Spectral-ExtraBoldItalic.woff2") format("woff2"),
        url("Spectral-ExtraBoldItalic.woff") format("woff");
}

.spectral-extralight {
    font-family: "Spectral", Arial, sans-serif;
    font-style: normal;
    font-weight: 200;
}
.spectral-extralight-italique {
    font-family: "Spectral", Arial, sans-serif;
    font-style: italic;
    font-weight: 200;
}
.spectral-light {
    font-family: "Spectral", Arial, sans-serif;
    font-style: normal;
    font-weight: 300;
}
.spectral-light-italique {
    font-family: "Spectral", Arial, sans-serif;
    font-style: italic;
    font-weight: 300;
}
.spectral {
    font-family: "Spectral", Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
}
.spectral-italique {
    font-family: "Spectral", Arial, sans-serif;
    font-style: italic;
    font-weight: 400;
}
.spectral-medium {
    font-family: "Spectral", Arial, sans-serif;
    font-style: normal;
    font-weight: 500;
}
.spectral-medium-italique {
    font-family: "Spectral", Arial, sans-serif;
    font-style: italic;
    font-weight: 500;
}
.spectral-semibold {
    font-family: "Spectral", Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
}
.spectral-semibold-italique {
    font-family: "Spectral", Arial, sans-serif;
    font-style: italic;
    font-weight: 600;
}
.spectral-bold {
    font-family: "Spectral", Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
}
.spectral-bold-italique {
    font-family: "Spectral", Arial, sans-serif;
    font-style: italic;
    font-weight: 700;
}
.spectral-extrabold {
    font-family: "Spectral", Arial, sans-serif;
    font-style: normal;
    font-weight: 900;
}
.spectral-extrabold-italique {
    font-family: "Spectral", Arial, sans-serif;
    font-style: italic;
    font-weight: 900;
}