@font-face {
    font-family: "Roboto-Light";
    font-style: normal;
    font-weight: 300;
    src:url("Roboto-Light.otf") format("otf"),
        url("Roboto-Light.ttf") format("ttf"),
        url("Roboto-Light.woff") format("woff"),
        url("Roboto-Light.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto-Regular";
    font-style: normal;
    font-weight: 500;
    src:url("Roboto-Regular.otf") format("otf"),
        url("Roboto-Regular.ttf") format("ttf"),
        url("Roboto-Regular.woff") format("woff"),
        url("Roboto-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto-Medium";
    font-style: normal;
    font-weight: 500;
    src:url("Roboto-Medium.otf") format("otf"),
        url("Roboto-Medium.ttf") format("ttf"),
        url("Roboto-Medium.woff") format("woff"),
        url("Roboto-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto-Bold";
    font-style: normal;
    font-weight: 700;
    src:url("Roboto-Bold.otf") format("otf"),
        url("Roboto-Bold.ttf") format("ttf"),
        url("Roboto-Bold.woff") format("woff"),
        url("Roboto-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto-Black";
    font-style: normal;
    font-weight: 700;
    src:url("Roboto-Black.otf") format("otf"),
        url("Roboto-Black.ttf") format("ttf"),
        url("Roboto-Black.woff") format("woff"),
        url("Roboto-Black.woff2") format("woff2");
}

@font-face {
    font-family: "Lato-Bold";
    font-style: normal;
    font-weight: 700;
    src:url("Lato-Bold.otf") format("otf"),
        url("Lato-Bold.ttf") format("ttf"),
        url("Lato-Bold.woff") format("woff"),
        url("Lato-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "MavenPro-Medium";
    font-style: normal;
    font-weight: 700;
    src:url("MavenPro-Medium.otf") format("otf"),
        url("MavenPro-Medium.ttf") format("ttf"),
        url("MavenPro-Medium.woff") format("woff"),
        url("MavenPro-Medium.woff2") format("woff2");
}