@font-face {
    font-family: "Open Sans";
    src:url("#{$css-root}fonts/OpenSans-Light-webfont.eot");
    src:url("#{$css-root}fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"),
        url("#{$css-root}fonts/OpenSans-Light-webfont.ttf") format("truetype"),
        url("#{$css-root}fonts/OpenSans-Light-webfont.svg#opensans_italic_webfont") format("svg"),
        url("#{$css-root}fonts/OpenSans-Light-webfont.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Open Sans";
    src:url("#{$css-root}fonts/OpenSans-Regular-webfont.eot");
    src:url("#{$css-root}fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"),
        url("#{$css-root}fonts/OpenSans-Regular-webfont.ttf") format("truetype"),
        url("#{$css-root}fonts/OpenSans-Regular-webfont.svg#opensans_regular_webfont") format("svg"),
        url("#{$css-root}fonts/OpenSans-Regular-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Open Sans";
    src:url("#{$css-root}fonts/OpenSans-Semibold-webfont.eot");
    src:url("#{$css-root}fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"),
        url("#{$css-root}fonts/OpenSans-Semibold-webfont.ttf") format("truetype"),
        url("#{$css-root}fonts/OpenSans-Semibold-webfont.svg#opensans_semibold_webfont") format("svg"),
        url("#{$css-root}fonts/OpenSans-Semibold-webfont.woff") format("woff");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Open Sans";
    src:url("#{$css-root}fonts/OpenSans-Bold-webfont.eot");
    src:url("#{$css-root}fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"),
        url("#{$css-root}fonts/OpenSans-Bold-webfont.ttf") format("truetype"),
        url("#{$css-root}fonts/OpenSans-Bold-webfont.svg#opensans_bold_webfont") format("svg"),
        url("#{$css-root}fonts/OpenSans-Bold-webfont.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Bitter";
    src: url("#{$css-root}fonts/Bitter-Regular.eot");
    src: url("#{$css-root}fonts/Bitter-Regular.eot?#iefix") format("embedded-opentype"),
       url("#{$css-root}fonts/Bitter-Regular.ttf") format("truetype"),
       url("#{$css-root}fonts/Bitter-Regular.svg#Bitter-Regular") format("svg"),
       url("#{$css-root}fonts/Bitter-Regular.woff") format("woff");
    font-weight:400;
    font-style:normal;
}

@font-face {
    font-family: "Bitter";
    src: url("#{$css-root}fonts/Bitter-Bold.eot");
    src: url("#{$css-root}fonts/Bitter-Bold.eot?#iefix") format("embedded-opentype"),
       url("#{$css-root}fonts/Bitter-Bold.ttf") format("truetype"),
       url("#{$css-root}fonts/Bitter-Bold.svg#Bitter-Bold") format("svg"),
       url("#{$css-root}fonts/Bitter-Bold.woff") format("woff");
    font-weight:700;
    font-style:normal;
}

@font-face {
    font-family: "wagtail";
    src:url("#{$css-root}fonts/wagtail.eot");
    src:url("#{$css-root}fonts/wagtail.eot?#iefix") format("embedded-opentype"),
        url("#{$css-root}fonts/wagtail.ttf") format("truetype"),
        url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg"),
        url("#{$css-root}fonts/wagtail.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
/* fix to make chrome on windows use svg, which renders better */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: "wagtail";
        src: url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg");
    }
}