I would like to be able to have the output file be sass. can there be an option added to inject your own template?

It only downloads woff at present, is it possible to get the woff2?

e..g

return src('Roboto:500,500italic&subset=latin').pipe(googleWebFonts())

vs

return src('./fonts.txt').pipe(googleWebFonts())

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)?

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.

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

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.

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&amp;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

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

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.

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)

@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

The example files fail on gulp 4:

{ AssertionError [ERR_ASSERTION]: Task function must be specified

Installing gulp 3 fix it.

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

Please add Option for WOFF2.

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?

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');
}

Hi man,

Is possible to generate other formats? Like:

• eot
• svg
• ttf
• woff2

Regards, Nicholls

Could you please publish a new package for v3 which fixes the issue in v2.1 when local fonts are missing?

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'));
});

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...

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'));
});

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

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, 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:

• SVG font
• EOT font

In #18 @michaelmior wrote that it would be relatively easy to incorporate support for other formats given that their User-Agents are known.

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.

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.

Script can not download font with + char.

Roboto+Mono:400,700

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?

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.

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 :)

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?

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