$roboto-font-path: "../fonts/roboto";
$opensans-font-path: "../fonts/opensans";

/* ROBOTO FONT -- FROM THICKER TO THINNER */
@font-face {
    font-family: "Roboto Black";
    src: url($roboto-font-path + "/Roboto-Black.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Black Italic";
    src: url($roboto-font-path + "/Roboto-BlackItalic.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Bold";
    src: url($roboto-font-path + "/Roboto-Bold.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Bold Italic";
    src: url($roboto-font-path + "/Roboto-BoldItalic.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Bold Condensed";
    src: url($roboto-font-path + "/Roboto-BoldCondensed.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Bold Condensed Italic";
    src: url($roboto-font-path + "/Roboto-BoldCondensedItalic.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Condensed";
    src: url($roboto-font-path + "/Roboto-Condensed.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Condensed Italic";
    src: url($roboto-font-path + "/Roboto-CondensedItalic.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Italic";
    src: url($roboto-font-path + "/Roboto-Italic.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Light";
    src: url($roboto-font-path + "/Roboto-Light.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Light Italic";
    src: url($roboto-font-path + "/Roboto-LightItalic.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Medium";
    src: url($roboto-font-path + "/Roboto-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Medium Italic";
    src: url($roboto-font-path + "/Roboto-MediumItalic.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Regular";
    src: url($roboto-font-path + "/Roboto-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Thin";
    src: url($roboto-font-path + "/Roboto-Thin.ttf") format("truetype");
}
@font-face {
    font-family: "Roboto Thin Italic";
    src: url($roboto-font-path + "/Roboto-ThinItalic.ttf") format("truetype");
}

/* OPEN SANS FONT -- FROM THICKER TO THINNER */
@font-face {
    font-family: "Open Sans Extra Bold";
    src: url($opensans-font-path + "/OpenSans-ExtraBold.ttf") format("truetype");
}
@font-face {
    font-family: "Open Sans Extra Bold Italic";
    src: url($opensans-font-path + "/OpenSans-ExtraBoldItalic.ttf") format("truetype");
}
@font-face {
    font-family: "Open Sans Bold";
    src: url($opensans-font-path + "/OpenSans-Bold.ttf") format("truetype");
}
@font-face {
    font-family: "Open Sans Bold Italic";
    src: url($opensans-font-path + "/OpenSans-BoldItalic.ttf") format("truetype");
}
@font-face {
    font-family: "Open Sans Semi Bold";
    src: url($opensans-font-path + "/OpenSans-SemiBold.ttf") format("truetype");
}
@font-face {
    font-family: "Open Sans Semi Bold Italic";
    src: url($opensans-font-path + "/OpenSans-SemiBoldItalic.ttf") format("truetype");
}
@font-face {
    font-family: "Open Sans Regular";
    src: url($opensans-font-path + "/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Open Sans Light";
    src: url($opensans-font-path + "/OpenSans-Light.ttf") format("truetype");
}
@font-face {
    font-family: "Open Sans Light Italic";
    src: url($opensans-font-path + "/OpenSans-LightItalic.ttf") format("truetype");
}
@font-face {
    font-family: "Open Sans Italic";
    src: url($opensans-font-path + "/OpenSans-Italic.ttf") format("truetype");
}