@font-face {
    font-family: 'Karla';
    src: url('karla-bold-webfont.woff2') format('woff2'),
         url('karla-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}
@font-face {
    font-family: 'Karla';
    src: url('karla-bolditalic-webfont.woff2') format('woff2'),
         url('karla-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;

}
@font-face {
    font-family: 'Karla';
    src: url('karla-italic-webfont.woff2') format('woff2'),
         url('karla-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;

}
@font-face {
    font-family: 'Karla';
    src: url('karla-regular-webfont.woff2') format('woff2'),
         url('karla-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Overpass Mono Bold';
    src: url('overpass-mono-bold-webfont.woff2') format('woff2'),
         url('overpass-mono-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Overpass Mono Light';
    src: url('overpass-mono-light-webfont.woff2') format('woff2'),
         url('overpass-mono-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Overpass Mono';
    src: url('overpass-mono-regular-webfont.woff2') format('woff2'),
         url('overpass-mono-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Overpass mono Semibold';
    src: url('overpass-mono-semibold-webfont.woff2') format('woff2'),
         url('overpass-mono-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}