/* thin */
@font-face
{
    FONT-FAMILY: "Rokkitt";
    SRC: url("Rokkitt-Thin.woff2") format("woff2");
    FONT-WEIGHT: 100;
    FONT-STYLE: normal;
    FONT-DISPLAY: swap;
}

/* extra light */
@font-face
{
    FONT-FAMILY: "Rokkitt";
    SRC: url("Rokkitt-ExtraLight.woff2") format("woff2");
    FONT-WEIGHT: 200;
    FONT-STYLE: normal;
    FONT-DISPLAY: swap;
}

/* light */
@font-face
{
    FONT-FAMILY: "Rokkitt";
    SRC: url("Rokkitt-Light.woff2") format("woff2");
    FONT-WEIGHT: 300;
    FONT-STYLE: normal;
    FONT-DISPLAY: swap;
}

/* regular */
@font-face
{
    FONT-FAMILY: "Rokkitt";
    SRC: url("Rokkitt-Regular.woff2") format("woff2");
    FONT-WEIGHT: 400;
    FONT-STYLE: normal;
    FONT-DISPLAY: swap;
}

/* medium */
@font-face
{
    FONT-FAMILY: "Rokkitt";
    SRC: url("Rokkitt-Medium.woff2") format("woff2");
    FONT-WEIGHT: 500;
    FONT-STYLE: normal;
    FONT-DISPLAY: swap;
}

/* semi bold */
@font-face
{
    FONT-FAMILY: "Rokkitt";
    SRC: url("Rokkitt-SemiBold.woff2") format("woff2");
    FONT-WEIGHT: 600;
    FONT-STYLE: normal;
    FONT-DISPLAY: swap;
}

/* bold */
@font-face
{
    FONT-FAMILY: "Rokkitt";
    SRC: url("Rokkitt-Bold.woff2") format("woff2");
    FONT-WEIGHT: 700;
    FONT-STYLE: normal;
    FONT-DISPLAY: swap;
}

/* extra bold */
@font-face
{
    FONT-FAMILY: "Rokkitt";
    SRC: url("Rokkitt-ExtraBold.woff2") format("woff2");
    FONT-WEIGHT: 800;
    FONT-STYLE: normal;
    FONT-DISPLAY: swap;
}

/* black */
@font-face
{
    FONT-FAMILY: "Rokkitt";
    SRC: url("Rokkitt-Black.woff2") format("woff2");
    FONT-WEIGHT: 900;
    FONT-STYLE: normal;
    FONT-DISPLAY: swap;
}