$CooperHewitt: "CooperHewitt";
$file: "CooperHewitt-Bold";
$family: "CooperHewitt";
$category: "sans-serif";

@mixin font-face($CooperHewitt, $file, $family, $category:"") {
    $filepath: "../fonts/" + $family + "/" + $file;
    @font-face {
        font-family: "#{$CooperHewitt}";
        src: url($filepath + ".eot");
        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $CooperHewitt + "") format('svg');
    }
    %#{$CooperHewitt} {
        font: {
            @if $category != "" {
                family: "#{$CooperHewitt}", #{$category};
            }
            @else {
                family: "#{$CooperHewitt}";
                weight: normal;
            }
        }
    }
}

$CooperHewitt-italic: "CooperHewitt-BoldItalic";
$file2: "CooperHewitt-BoldItalic";
$family2: "CooperHewitt";
$category2: "sans-serif";

@mixin font-face($CooperHewitt-italic, $file2, $family2, $category2:"") {
    $filepath: "../fonts/" + $family2 + "/" + $file2;
    @font-face {
        font-family: "#{$CooperHewitt-italic}";
        src: url($filepath + ".eot");
        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $CooperHewitt-italic + "") format('svg');
    }
    %#{$CooperHewitt-italic} {
        font: {
            @if $category2 != "" {
                family: "#{$CooperHewitt-italic}", #{$category2};
            }
            @else {
              family: "#{$CooperHewitt-italic}";
                // weight: itali;
            }
        }
    }
}

$rubik: "rubik";
$file3: "Rubik-Light";
$family3: "rubik";
$category3: "sans-serif";


@mixin font-face($rubik, $file3, $family3, $category3:"") {
    $filepath: "../fonts/" + $family3 + "/" + $file3;
    @font-face {
        font-family: "#{$rubik}";
        src: url($filepath + ".eot");
        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $rubik + "") format('svg');
    }
    %#{$rubik} {
        font: {
            @if $category3 != "" {
                family: "#{$rubik}", #{$category3};
            }
            @else {
                family: "#{$rubik}";
                weight: normal;
            }
        }
    }
}

$rubik-B: "Rubik-Bold";
$file4: "Rubik-Bold";

@mixin font-face($rubik-B, $file4, $family3, $category3:"") {
    $filepath: "../fonts/" + $family3 + "/" + $file4;
    @font-face {
        font-family: "#{$rubik-B}";
        src: url($filepath + ".eot");
        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $rubik-B + "") format('svg');
    }
    %#{$rubik-B} {
        font: {
            @if $category3 != "" {
                family: "#{$rubik-B}", #{$category3};
            }
            @else {
                family: "#{$rubik-B}";
                weight: normal;
            }
        }
    }
}

$rubik-MI: "Rubik-MediumItalic";
$file6: "Rubik-MediumItalic";

@mixin font-face($rubik-MI, $file6, $family3, $category3:"") {
    $filepath: "../fonts/" + $family3 + "/" + $file6;
    @font-face {
        font-family: "#{$rubik-MI}";
        src: url($filepath + ".eot");
        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $rubik-MI + "") format('svg');
    }
    %#{$rubik-MI} {
        font: {
            @if $category3 != "" {
                family: "#{$rubik-MI}", #{$category3};
            }
            @else {
                family: "#{$rubik-MI}";
                weight: normal;
            }
        }
    }
}

$cmu: "cmu-concrete-ita";
$file5: "cmunoti";
$family5: "Concrete";
$category5: "serif";


@mixin font-face($cmu, $file5, $family5, $category5:"") {
    $filepath: "../fonts/" + $family5 + "/" + $file5;
    @font-face {
        font-family: "#{$cmu}";
        src: url($filepath + ".eot");
        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $cmu + "") format('svg');
    }
    %#{$cmu} {
        font: {
            @if $category5 != "" {
                family: "#{$cmu}", #{$category5};
            }
            @else {
                family: "#{$cmu}";
                weight: normal;
            }
        }
    }
}
