@font-face {
    font-family: HPEGraphik;
    src: url(HPEGraphik-Thin-Web.woff2)format("woff2");
    font-weight: 100;
    font-style: normal;
    font-stretch: 100%;
    font-display: swap
}

@font-face {
    font-family: HPEGraphik;
    src: url(HPEGraphik-Light-Web.woff2)format("woff2");
    font-weight: 300;
    font-style: normal;
    font-stretch: 100%;
    font-display: swap
}

@font-face {
    font-family: HPEGraphik;
    src: url(HPEGraphik-Regular-Web.woff2)format("woff2");
    font-weight: 400;
    font-style: normal;
    font-stretch: 100%;
    font-display: swap
}

@font-face {
    font-family: HPEGraphik;
    src: url(HPEGraphik-Medium-Web.woff2)format("woff2");
    font-weight: 500;
    font-style: normal;
    font-stretch: 100%;
    font-display: swap
}

@font-face {
    font-family: HPEGraphik;
    src: url(HPEGraphik-Semibold-Web.woff2)format("woff2");
    font-weight: 600;
    font-style: normal;
    font-stretch: 100%;
    font-display: swap
}

@font-face {
    font-family: HPEGraphik;
    src: url(HPEGraphik-Bold-Web.woff2)format("woff2");
    font-weight: 700;
    font-style: normal;
    font-stretch: 100%;
    font-display: swap
}

@font-face {
    font-family: HPEGraphik;
    src: url(HPEGraphik-Black-Web.woff2)format("woff2");
    font-weight: 900;
    font-style: normal;
    font-stretch: 100%;
    font-display: swap
}

@font-face {
    font-family: HPEGraphik;
    src: url(HPEGraphikXXCondensed-Light-Web.woff2)format("woff2");
    font-weight: 300;
    font-style: normal;
    font-stretch: 75%;
    font-display: swap
}

@font-face {
    font-family: HPEGraphik;
    src: url(HPEGraphikXXCondensed-Bold-Web.woff2)format("woff2");
    font-weight: 700;
    font-style: normal;
    font-stretch: 75%;
    font-display: swap
}