Skip to content

Instantly share code, notes, and snippets.

@Shalomeev
Last active July 4, 2018 15:48
Show Gist options
  • Save Shalomeev/182b5c27a7528f22bb9e647ef1742161 to your computer and use it in GitHub Desktop.
Save Shalomeev/182b5c27a7528f22bb9e647ef1742161 to your computer and use it in GitHub Desktop.
let to include @font-face by simple less mixin
.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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment