@font-face {
    font-family: 'Bitter';
    src: url('Bitter-Regular.eot');
    src: url('Bitter-Regular.eot?#iefix') format('embedded-opentype'),
        url('Bitter-Regular.woff2') format('woff2'),
        url('Bitter-Regular.woff') format('woff'),
        url('Bitter-Regular.ttf') format('truetype'),
        url('Bitter-Regular.svg#Bitter-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bitter';
    src: url('Bitter-Italic.eot');
    src: url('Bitter-Italic.eot?#iefix') format('embedded-opentype'),
        url('Bitter-Italic.woff2') format('woff2'),
        url('Bitter-Italic.woff') format('woff'),
        url('Bitter-Italic.ttf') format('truetype'),
        url('Bitter-Italic.svg#Bitter-Italic') format('svg');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Bitter';
    src: url('Bitter-Bold.eot');
    src: url('Bitter-Bold.eot?#iefix') format('embedded-opentype'),
        url('Bitter-Bold.woff2') format('woff2'),
        url('Bitter-Bold.woff') format('woff'),
        url('Bitter-Bold.ttf') format('truetype'),
        url('Bitter-Bold.svg#Bitter-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}


html, body, div, p, h1, h2, h3, h4, h5, h6 {
    font-family: 'Bitter'; font-weight: normal; font-style: normal;
}


.light {
    font-weight: 300;
    font-style: normal;
}

.roman {
    font-weight: 400;
    font-style: normal;
}

.italic {
    font-weight: 500;
    font-style: italic;
}

.bold {
    font-weight: bold;
    font-style: normal;
}

.black {
    font-weight: 800;
    font-style: normal;
}

.extrablack {
    font-weight: 900;
    font-style: normal;
}


.roboto p {
    font-family: 'Roboto', sans-serif;
}