Skip to content

Instantly share code, notes, and snippets.

@joviczarko
Last active August 29, 2015 14:23
Show Gist options
  • Save joviczarko/4f0b00a8b79d45312f20 to your computer and use it in GitHub Desktop.
Save joviczarko/4f0b00a8b79d45312f20 to your computer and use it in GitHub Desktop.
Loading multiple font-face with LESS
//** Relative path to files
@font-path: 'font/path/';
//** A default mixin to be used for fonts.
.fontface(@family, @filename-base, @weight, @style, @svgID){
@font-face {
font-family: '@{family}';
src: url('@{font-path}@{filename-base}.eot');
src: url('@{font-path}@{filename-base}.eot?#iefix') format('embedded-opentype'),
url('@{font-path}@{filename-base}.woff2') format('woff2'),
url('@{font-path}@{filename-base}.woff') format('woff'),
url('@{font-path}@{filename-base}.ttf') format('truetype'),
url('@{font-path}@{filename-base}.svg#@{svgID}') format('svg');
font-weight: @weight;
font-style: @style;
}
}
//** Generating @font-face definition using above mixin and providing variables
//Regular
.fontface(Cool Font, coolfont-regular-webfont, normal, normal, cool_fontregular);
//Bold
.fontface(Cool Font, coolfont-bold-webfont, bold, normal, cool_fontbold);
// Add as many font-face definitions as you wish
//Output of this LESS file should be like this (This is only for example, do not copy lines bellow it is CSS output only, not LESS)
@font-face {
font-family: 'Cool Font';
src: url('font/path/coolfont-regular-webfont.eot');
src: url('font/path/coolfont-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/path/coolfont-regular-webfont.woff2') format('woff2'),
url('font/path/coolfont-regular-webfont.woff') format('woff'),
url('font/path/coolfont-regular-webfont.ttf') format('truetype'),
url('font/path/coolfont-regular-webfont.svg#cool_fontregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Cool Font';
src: url('font/path/coolfont-bold-webfont.eot');
src: url('font/path/coolfont-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('font/path/coolfont-bold-webfont.woff2') format('woff2'),
url('font/path/coolfont-bold-webfont.woff') format('woff'),
url('font/path/coolfont-bold-webfont.ttf') format('truetype'),
url('font/path/coolfont-bold-webfont.svg#cool_fontbold') format('svg');
font-weight: bold;
font-style: normal;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment