Last active
August 29, 2015 14:23
-
-
Save joviczarko/4f0b00a8b79d45312f20 to your computer and use it in GitHub Desktop.
Loading multiple font-face with LESS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//** 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