battlesnake / gulp-google-webfonts Goto Github PK
View Code? Open in Web Editor NEWJS: Google-webfont Gulp-plugin
JS: Google-webfont Gulp-plugin
Hi man,
Is possible to generate other formats? Like:
Regards, Nicholls
Is it possible that we could have an option to use HTTPS for the fetching? Our internal network has issues fetching over HTTP but changing it in this version of the code would require a fork.
If you're happy, I can look at providing a PR with an option
'protocol': 'https'
where the default would be http as it's currently implemented?
I use gulpfile.babel.js (ecma script 6) and gulp fonts task returns:
[04:22:35] Error: Cannot find module 'lodash.restparam'
It's fixable by:
npm i lodash.restparam --save-dev
However I consider this as workaround and it's still a bug.
googleFontsOptions: {
fontsDir: '/fonts/',
cssDir: '.',
cssFilename: 'fonts.css',
fontDisplayType: 'swap',
format: 'woff2'
},
With this config all files will be downloaded to ./../fonts
and gulp.dest path will be ignored.
Hi,
I've put my .list in my app dir and I tried to output the font in my public dir. Since the fontDir path is relative to .list I've put something like this '../../../public/dir/fonts/' but it didn't work. I can go two steps back '../../public/dir/fonts/' but not three, I can go three steps back only if I remove some folders like this '../../../public/'.
Thanks!
Hi,
in first place - thank you for your package, it's awesome.
I have one question - feature request.
Do you think that should be possible create small nodejs package without dependency to gulp?
I have some project without gulp, just npm scripts, gulp could be there overkill.
Script can not download font with +
char.
Roboto+Mono:400,700
Please make url relative to css or an option to set as relative or absolute.
Current state:
var options = { fontsDir: 'fonts', cssDir: 'styles' }
Result: /fonts/blablabla.woff, /styles/fonts.css
src: url('fonts/blablabla.woff')
Should be:
src: url('../fonts/blablabla.woff')
Plugin doesn't get fonts with character sets different from basic latin.
Trying to get font with the options:
Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700italic,700,900,900italic&subset=latin,cyrillic-ext,latin-ext,cyrillic
But plugin will return only result for the request:
Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700italic,700,900,900italic
'subset' argument is lost while encodeURIComponent(param) in function requestCss (well, probably, not lost, but not encoded properly, so Google ignores it).
The problem disappeared when encodeURIComponent was removed from function. I think it's a little bit dirty hack, but can't see another way to fix it.
P.S. Hope my english is not very hard to understand :)
Hi,
I'm using Windows 8.1 and can't get the plugin to work on my machine. Even the minimalist example out of the readme does not work. Gulp does not output any error but the destination of the fonts stays empty after running the task. Testing the exact same code on OSX does work. Any suggestions?
I would like to be able to have the output file be sass. can there be an option added to inject your own template?
Can you support also to give fonts as string e.g.
Droid Serif 400,400 latin
IM Fell DW Pica 400,400 latin
Great Vibes 400,400 latin
or as array of strings instead only from file with the same content?
Today I tried downloading the Cabin font and an error occurred. Upon investigation I discovered its font-face comes with the
font-stretch attribute which fails to match the formatting regex.
@font-face {
font-family: 'Cabin';
font-style: normal;
font-weight: 400;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/cabin/v15/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkV2EH7ilwQ.woff) format('woff');
}
The used 'http' class seems not to support a http proxy.
May be you can change the code to use 'request' instead since it does respect
http_proxy and https_proxy environment variables.
Running gulp-google-webfonts outputs the following error.
We are using the example code in README file.
Maybe the following output message will help with fixing this issue.
/.././node_modules/gulp-google-webfonts/index.js:275
request.name = path.posix.join(options.fontsDir, request.name);
^
TypeError: Cannot call method 'join' of undefined
at makeFontFace (/.././node_modules/gulp-google-webfonts/index.js:275:31)
at Array.map (native)
at generateFontCss (/.././node_modules/node_modules/gulp-google-webfonts/index.js:265:6)
at parseCss (/.././node_modules/gulp-google-webfonts/index.js:216:4)
at fn (/.././node_modules/async/lib/async.js:638:34)
at Object._onImmediate (/.././node_modules/async/lib/async.js:554:34)
at processImmediate [as _immediateCallback] (timers.js:345:15)
How do you go about generating css output where the src url is prefixed with a /
?
I'm trying to achieve a directory the following directory structure:
/
/fonts/fontfiles.woff
/css/fontcss.css
When loading in the css on any page that is not at site root I'm finding the font resource will fail to load.
@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 700;
font-display: auto;
src: local('Oxygen Bold'), local('Oxygen-Bold'), url(fonts/Oxygen-normal-700.woff) format('woff');
unicode-range: U+0-10FFFF;
}
โ๏ธ fails to load fonts on any page in a sub folder /example/example-page.html
How do I configure this to output the font src in my css like this, whilst maintaining the above directory structure:
@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 700;
font-display: auto;
src: local('Oxygen Bold'), local('Oxygen-Bold'), url(/fonts/Oxygen-normal-700.woff) format('woff');
unicode-range: U+0-10FFFF;
}
Thanks
Is it possible define path in generated css/scss?
Currently it generates:
src: url(Open_Sans-normal-700.woff) format('woff');
but I would like it to be this path
src: url(assets/fonts/lib/Open_Sans-normal-700.woff) format('woff');
My folder structure is
assets/css
assets/fonts/fonts.list
assets/fonts/lib
gulp.task('fonts', function () {
return gulp.src('./assets/fonts/fonts.list')
.pipe(googleWebFonts({
cssDir: '../../css/',
fonts_dir: './lib',
cssFilename: '_fonts.scss'
}))
.pipe(gulp.dest('assets/fonts/lib'));
});
It only downloads woff at present, is it possible to get the woff2?
Hi
I've made function to build fonts.list
. You need just copy one of this format at Google Fonts and paste into variable:
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic" rel="stylesheet">
or
@import url('https://fonts.googleapis.com/css?family=Lobster&subset=cyrillic');
It is on my gists:
https://gist.github.com/colorwebdesigner/c28b81a85a22663433aa67583f9c318b
Is it possible to add an option to download the TTF format instead (full font file)
so I can further process it (custom subsetting, woff2 conversion, etc)?
Could you please publish a new package for v3 which fixes the issue in v2.1 when local fonts are missing?
Hi man,
See an issue with the plugin: http://screencast.com/t/yEkrahyCM0
And the paths are:
var paths = {
fonts: 'app/fonts.list',
fontOptions: {
fontsDir: 'fonts/',
cssDir: 'css/',
cssFilename: 'fonts.css'
},
destFonts: './www/'
};
Regards, Nicholls
e..g
return src('Roboto:500,500italic&subset=latin').pipe(googleWebFonts())
vs
return src('./fonts.txt').pipe(googleWebFonts())
I am using the following font.list
# Google format
Oswald:400,700
Montserrat:300,400,600,800
Open+Sans:300,400,600,800
Lato:300,400
I get the following error:
Error: connect ECONNREFUSED 127.0.0.1:443
at Object.exports._errnoException (util.js:1020:11)
at exports._exceptionWithHostPort (util.js:1043:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1086:14)
When removing "Oswald:400,700" from the list everything works as expected, fonts are downloaded and CSS is created. I have tried a couple of combinations of fonts, Oswald seems to be the only one not supported.
Heres the google link for the font: https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap
Please add Option for WOFF2.
The material-design-icons have different css but it would be great if I could use it to download a local copy of roboto and material icons.
The example files fail on gulp
4:
{ AssertionError [ERR_ASSERTION]: Task function must be specified
Installing gulp
3 fix it.
/* Use local copy of font, if the user does not have that font installed (two different names are tried),
then the downloadable font is used instead. */
src: local('Roboto'), local('Roboto-Regular'),
Hi, guys.
Shouldn't the plugin support for EOT and SVG formats as well? I'm very occasionally do something web-related, so I'm not sure if these formats are still relevant to the world, but Google WebFonts seems to provide source files for them as well.
For example, if I navigate to https://fonts.googleapis.com/css?family=PT+Serif with custom User-Agent, I get the following results:
/** User-Agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us)
AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16 */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
src: local('PT Serif'), local('PTSerif-Regular'), url(...) format('svg');
}
/* User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1) */
@font-face {
font-family: 'PT Serif';
font-style: normal;
font-weight: 400;
src: url(...);
}
I've cut original long URLs from the above output to get rid of horizontal scrolling, but here they are:
In #18 @michaelmior wrote that it would be relatively easy to incorporate support for other formats given that their User-Agents are known.
When using the tab-delimited format, even with exactly the same example with README.md, I get the following output:
$ gulpfile.js fonts
[19:03:55] Using gulpfile .../gulpfile.js
[19:03:55] Starting 'fonts'...
events.js:85
throw er; // Unhandled 'error' event
^
Error: Failed to retrieve webfont CSS
at parseCss (.../node_modules/gulp-google-webfonts/index.js:183:17)
at fn (.../node_modules/gulp-google-webfonts/node_modules/async/lib/async.js:638:34)
at Immediate._onImmediate (.../node_modules/gulp-google-webfonts/node_modules/async/lib/async.js:554:34)
at processImmediate [as _immediateCallback] (timers.js:367:17)
Process finished with exit code 1
It works properly with Google format. Using gulp-google-webfonts 0.0.12.
Optionally, when specifying a list of formats, they all should be downloaded and css with all formats should be generated
The README mentions a so called "Google Format" which uses ',' but the real Google URL uses ';' like in https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300&display=swap
Why using some sort of format at all? It should be possible to juste paste the full URL in the list.
for example if your project follow this structure
/src
| assets
| fonts
| css
I would expect to download the fonts in src/assets/fonts and css in src/assets/css, and the css will have the right url to access that font.
the gulp task would be like this:
gulp.task('fonts', function () {
return gulp.src('./fonts.list')
.pipe(googleWebFonts({fontDir: 'fonts', cssDir:'css'}))
.pipe(gulp.dest('src/assets'));
});
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
/* Use local copy of font, if the user does not have that font installed (two different names are tried),
then the downloadable font is used instead. */
src: local('Roboto'), local('Roboto-Regular'),
url(Roboto-normal-400.woff2) format('woff2'),
url(Roboto-normal-400.woff) format('woff');
}
Safari support woff2 http://caniuse.com/#search=woff2
Hello,
I wanted to generate an SCSS file to include it in the rest of my SCSS. The file generation works fine but to paths to the font files are wrong. So I need an option to set the path to the font files for the @font-face URL values. What I want to have is something like that:
googleWebFonts({
fontsDir: './dist/fonts',
cssDir: './src/scss/fonts',
cssFilename: '_google-fonts.scss',
fontsUrl: '/fonts',
});```
to get inside the generated CSS:
```css
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
font-display: auto;
src: url(/fonts/Roboto-italic-400.woff) format('woff');
unicode-range: U+0-10FFFF;
}
I know this is not a bug but a feature request. I would appreciate such an option in a future update.
Many thanks and Greetings
Konrad
When using this under Windows, the CSS generated has incorrect source paths. I tracked the problem down to this function:
function makeFontFace(request) {
request.name = path.join(options.fontsDir, request.name);
return template
.replace(/$(\w+)/g, function (m, name) { return request[name]; });
}
The error is that 'path' will use the local system's path separator when joining path elements. The end result is that the web server treats the Windows '' as an escape character, and returns that there is no such file when trying to access the woff file. (Even when running under Windows.)
The fix is to change the path join statement to the following.
request.name = path.posix.join(options.fontsDir, request.name);
This will always use the '/' when joining the path elements, and will produce the correct source URL path in the CSS.
fonts.file with this content:
Roboto:300,700&subset=cyrillic
doesn't download the right cyrillic font, it download the normal latin. In tab-delimited format, its the same...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.