Skip to content

Instantly share code, notes, and snippets.

@saulovenancio
Forked from juanbrujo/demo.less
Created June 12, 2018 12:35
Show Gist options
  • Save saulovenancio/504073b123fc9f2eeeb2182acadd0582 to your computer and use it in GitHub Desktop.
Save saulovenancio/504073b123fc9f2eeeb2182acadd0582 to your computer and use it in GitHub Desktop.
@font-face LESS Mixin
// USE
.font-face(Ubuntu-Regular, 'https://dl.dropbox.com/u/1220078/ubuntu-new/Ubuntu-Regular-webfont', 400, normal);
.font-face(Ubuntu-Italic, 'https://dl.dropbox.com/u/1220078/ubuntu-new/Ubuntu-Regular-Italic-webfont', 400, italic);
.font-face(Ubuntu-Bold, 'https://dl.dropbox.com/u/1220078/ubuntu-new/Ubuntu-Bold-webfont', 700, normal);
.test {
.font(Ubuntu-Regular, 1em, normal, normal);
h1 {
.font(Ubuntu-Bold, 1.7em, bold, normal);
}
i {
.font(Ubuntu-Italic, inherit, normal, italic);
}
b {
.font(Ubuntu-Bold, inherit, bold, normal);
}
}
/**
* @font-face LESS Mixin
* use: .font-face(
* @font-family, // name
* @file-path, // absolute/relative URL to font files
* @font-weight, // light/normal/bold/inherit | 300/400/700
* @font-style // italic/normal/inherit
* )
*/
.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#@{file-path}') format('svg');
font-weight: @font-weight;
font-style: @font-style;
}
}
/**
* font LESS Mixin
* use: .font(
* @font-family, // name
* @file-size, // any unit/inherit
* @font-weight, // light/normal/bold/inherit | 300/400/700
* @font-style // italic/normal/inherit
* )
*/
.font(@font-family, @font-size, @font-weight, @font-style){
font-family: @font-family;
font-size: @font-size;
font-weight: @font-weight;
font-style: @font-style;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment