hehe/user/themes/hehe/scss/configuration/_mixin.scss

$roboto_light: "Roboto-Light";
$file: "Roboto-Light-webfont";
$family: "roboto_light/";
$category: "sans-serif";

@mixin font-face($roboto_light, $file, $family, $category:"") {
    $filepath: "../fonts/" + $family + "/" + $file;
    @font-face {
        font-family: "#{$roboto_light}";
        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#" + $roboto_light + "") format('svg');
    }
    %#{$roboto_light} {
        font: {
            @if $category != "" {
                family: "#{$roboto_light}", #{$category};
                weight: normal;

            }
            @else {
                family: "#{$roboto_light}";
                weight: normal;
            }
        }
    }
}


$roboto_regular: "Roboto-regular";
$file2: "Roboto-Regular-webfont";
$family2: "roboto_regular/";

@mixin font-face($roboto_regular, $file2, $family2, $category:"") {
    $filepath: "../fonts/" + $family2 + "/" + $file2;
    @font-face {
        font-family: "#{$roboto_regular}";
        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#" + $roboto_regular + "") format('svg');
    }
    %#{$roboto_regular} {
        font: {
            @if $category != "" {
                family: "#{$roboto_regular}", #{$category};
                weight: normal;

            }
            @else {
                family: "#{$roboto_regular}";
                weight: normal;
            }
        }
    }
}

$roboto_medium: "Roboto-Medium";
$file3: "Roboto-Medium-webfont";
$family3: "roboto_medium/";

@mixin font-face($roboto_medium, $file3, $family3, $category:"") {
    $filepath: "../fonts/" + $family3 + "/" + $file3;
    @font-face {
        font-family: "#{$roboto_medium}";
        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#" + $roboto_medium + "") format('svg');
    }
    %#{$roboto_medium} {
        font: {
            @if $category != "" {
                family: "#{$roboto_medium}", #{$category};
                weight: normal;

            }
            @else {
                family: "#{$roboto_medium}";
                weight: normal;
            }
        }
    }
}

$roboto_bold: "Roboto-Bold";
$file4: "Roboto-Bold-webfont";
$family4: "roboto_bold/";

@mixin font-face($roboto_bold, $file4, $family4, $category:"") {
    $filepath: "../fonts/" + $family4 + "/" + $file4;
    @font-face {
        font-family: "#{$roboto_bold}";
        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#" + $roboto_bold + "") format('svg');
    }
    %#{$roboto_bold} {
        font: {
            @if $category != "" {
                family: "#{$roboto_bold}", #{$category};
            }
            @else {
                family: "#{$roboto_bold}";
                weight: normal;
            }
        }
    }
}