.font-face(@font-family, @file-path, @font-weight, @font-style) {
@font-face {
font-family: @font-family;
src: url('@{file-path}.eot');
src: url('@{file-path}.eot?#iefix') format('embedded-opentype'),
url('@{file-path}.woff') format('woff'),
url('@{file-path}.ttf') format('truetype'),
url('@{file-path}.svg') format('svg');
font-weight: @font-weight;
font-style: @font-style;
}
}
Example of usage (path to files without their extension. Extension will be added in mixin):
@import "../mixins/font";
.font-face(Roboto, "../../fonts/RobotoLight/RobotoLight", 300, normal);
.font-face(Roboto, "../../fonts/RobotoRegular/RobotoRegular", 400, normal);
.font-face(Roboto, "../../fonts/RobotoMedium/RobotoMedium", 500, normal);
.font-face(Roboto, "../../fonts/RobotoBold/RobotoBold", 700, normal);