tbd;
Last active
December 17, 2015 06:49
-
-
Save line-o/5568723 to your computer and use it in GitHub Desktop.
working google webfont import mixins for current stable (v1.3.3) and upcoming beta (v1.4) of less with default parameters
derived from this discussion
<http://stackoverflow.com/posts/16524650/>
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
{ | |
"name": "gfont", | |
"main": "./gfont.less", | |
"version": "0.0.1", | |
"dependencies": {} | |
} |
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
/* | |
examples | |
*/ | |
@import "gfont"; | |
@gFontName: 'Roboto Slab'; | |
@sansFontFamily: @gFontName, Arial, sans-serif; | |
/* v1.4 | |
.gFontImport(@gFontName); | |
.gFontImport(@gFontName;'400,700'); | |
.gFontImport(@gFontName;'400,700';'latin,latin-ext'); | |
*/ | |
.gFontInject(@gFontName); | |
.gFontInject(@gFontName;'400,700'); | |
.gFontInject(@gFontName;'400,700';'latin,latin-ext'); | |
body { | |
font-family: @sansFontFamily; | |
} |
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
/* | |
works with less v1.4 | |
*/ | |
.gFontImport (@name; @weights: 400; @subsets: latin) { | |
@domain: 'http://fonts.googleapis.com'; | |
@escaped: ~`"@{name}".replace(/'([^']+)'/,'$1').replace(' ', '+')`; // needed to get rid of those single quotes | |
@import url('@{domain}}/css?family=@{name}:@{weights}&subset=@{subsets}'); | |
} | |
/* | |
hack for current less (v1.3.3) | |
thx to http://stackoverflow.com/users/2113185/martin-turjak | |
NOTE: this will not be put at the top of your compressed CSS automatically | |
*/ | |
.gFontInject (@name; @weights: 400; @subsets: latin) { | |
@domain: 'http://fonts.googleapis.com'; | |
@escaped: ~`"@{name}".replace(/'([^']+)'/,'$1').replace(' ', '+')`; | |
@inject: ~"@import url('@{domain}}/css?family=@{escaped}:@{weights}&subset=@{subsets}');"; | |
@{inject} .null {/**/}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment