majodev / google-webfonts-helper Goto Github PK

Would be cool if there were checkboxes for choosing which font weights / styles you want included, and then the generated CSS / .zip would only include those.

After reading the Open Font License FAQ I understand that a font has to be renamed when downloaded using your tool.
The License requires that the original font name (referred as Reserved Font Name) has not to be used when the font was modified (i.e. converted, repacked etc) in any way.

I have no clue how I could do the renaming technically.
Just renaming the files did not work. So I think the name is embedded somewhere within the files, too.

Can you add an option to rename the selected font when building the web font packages?
Or is there an easy (or even doable) way to rename the fonts in the generated derivates later?

Regards, Alexander

This is the project I searched for years. Thank you so much!

Fuck google and their purposely not letting us download this open source fonts in web formats in a easy way. They are obviously want ppl to use their caching servers with their stupidly crypted filenames so they can track ppl and collect all sorts of data from it. And they won as always, every stupid open source project is use google webfonts. Years of preach how great independent open source should be ... but then going for this crap.

Also developing locally with no Internet and google webfonts breaks the fonts. But everyone is running for it like crazy because its so easy - as always.

Node version 8.10.0

> npm install

> [email protected] preinstall /Users/fredderf/project/web-design-contest-fonts/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-profiler
>


> [email protected] preinstall /Users/fredderf/project/web-design-contest-fonts/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug
>


> [email protected] install /Users/fredderf/project/web-design-contest-fonts/node_modules/connect-mongo/node_modules/mongodb/node_modules/bson
> (node-gyp rebuild 2> builderror.log) || (exit 0)

  CXX(target) Release/obj.target/bson/ext/bson.o

> [email protected] install /Users/fredderf/project/web-design-contest-fonts/node_modules/connect-mongo/node_modules/mongodb/node_modules/kerberos
> (node-gyp rebuild 2> builderror.log) || (exit 0)

  CXX(target) Release/obj.target/kerberos/lib/kerberos.o

> [email protected] install /Users/fredderf/project/web-design-contest-fonts/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug
> node-pre-gyp install --fallback-to-build

node-pre-gyp info it worked if it ends with ok
node-pre-gyp verb cli [ '/Users/fredderf/.nvm/versions/node/v8.9.1/bin/node',
node-pre-gyp verb cli   '/Users/fredderf/project/web-design-contest-fonts/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/node_modules/.bin/node-pre-gyp',
node-pre-gyp verb cli   'install',
node-pre-gyp verb cli   '--fallback-to-build' ]
node-pre-gyp info using [email protected]
node-pre-gyp info using [email protected] | darwin | x64
node-pre-gyp verb command install []
node-pre-gyp info check checked for "/Users/fredderf/project/web-design-contest-fonts/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/build/debug/v0.4.6/node-v57-darwin-x64/debug.node" (not found)
node-pre-gyp http GET https://node-inspector.s3.amazonaws.com/debug/v0.4.6/node-v57-darwin-x64.tar.gz
node-pre-gyp ERR! UNCAUGHT EXCEPTION
node-pre-gyp ERR! stack Error: Cannot find module 'internal/util/types'
node-pre-gyp ERR! stack     at Function.Module._resolveFilename (module.js:536:15)
node-pre-gyp ERR! stack     at Function.Module._load (module.js:466:25)
node-pre-gyp ERR! stack     at Module.require (module.js:579:17)
node-pre-gyp ERR! stack     at require (internal/module.js:11:18)
node-pre-gyp ERR! stack     at evalmachine.<anonymous>:31:26
node-pre-gyp ERR! stack     at Object.<anonymous> (/Users/fredderf/project/web-design-contest-fonts/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/node_modules/node-pre-gyp/node_modules/tar/node_modules/fstream/node_modules/graceful-fs/fs.js:11:1)
node-pre-gyp ERR! stack     at Module._compile (module.js:635:30)
node-pre-gyp ERR! stack     at Object.Module._extensions..js (module.js:646:10)
node-pre-gyp ERR! stack     at Module.load (module.js:554:32)
node-pre-gyp ERR! stack     at tryModuleLoad (module.js:497:12)
node-pre-gyp ERR! System Darwin 17.4.0
node-pre-gyp ERR! command "/Users/fredderf/.nvm/versions/node/v8.9.1/bin/node" "/Users/fredderf/project/web-design-contest-fonts/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /Users/fredderf/project/web-design-contest-fonts/node_modules/grunt-node-inspector/node_modules/node-inspector/node_modules/v8-debug
node-pre-gyp ERR! node -v v8.9.1
node-pre-gyp ERR! node-pre-gyp -v v0.6.9
node-pre-gyp ERR! This is a bug in `node-pre-gyp`.
node-pre-gyp ERR! Try to update node-pre-gyp and file an issue if it does not help:
node-pre-gyp ERR!     <https://github.com/mapbox/node-pre-gyp/issues>
npm ERR! code ELIFECYCLE
npm ERR! errno 7
npm ERR! [email protected] install: `node-pre-gyp install --fallback-to-build`
npm ERR! Exit status 7
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/fredderf/.npm/_logs/2018-03-27T00_41_10_772Z-debug.log

Asking because that appears to be the reason why text set in Open Sans looks "less nice" on Windows in recent Chrome/Opera versions (when served local font files fetched using google-webfonts-helper).

The same page/site's text is rendered differently if/when google-hosted font assets are requested.

Here's a GIF in hopes of getting the message across easier:

Focus on characters/words on the dark background as the GIF frame changes and you'll hopefully start spotting the differences.

P.S.
Thanks for building this great tool and for all the work you've put into it so far!

I am getting an "Application Error" response from the service, both in the browser and through the API.

Hi,

It seems Montserrat Latin-extended regular doesn't contain special characters like őű. However Montserrat Latin-extended font-weight: 500 does.

Thanks
Sandor

When I look into the Open Sans font, some font weights (e.g. 300 or 600) are some kind of a serif fonts but not the Open Sans.

Poppins Regular and Poppins 700 looks the same
https://google-webfonts-helper.herokuapp.com/fonts/poppins?subsets=latin

Would make batch importing a large numbers of font to serve locally with the WebFont loader a lot easier.

I think Google Fonts also sends different files depending on the operating system. So Chrome 46 in Windows will receive a different woff2 file than Chrome 46 in OS X.

Do you have a method to deal with this?

Looks like all fonts are downloaded as single file with selected characters supported, while I'd like to have versions with unicode-range, which now works in all modern browsers to download fewer bytes.
Will it be supported at some point or how it works currently is intentional?

All downloaded fonts are currently latin only!

I will address that ASAP.

When you're trying to install the font-family "Libre Fanklin", you'll fail by just copy and paste, because the names in the css-code and the names of the font files are not the same...
one says latin_latin-ext and teh other latin-ext_latin or something like this.

It's easy to fix, but annoying and difficult to find the bug, if you're are uncommon with css and stuff like this.

I followed the instructions and the fonts do work for up to date Chrome, Firefox, Opera browsers on Mac OS X 10.13.4, but not yet on a up-to date Safari, both on a Macbook and an iPad Air 4: I get Times Roman because I did intentionally not specify a "replacement" font. I hope it's OK mentioning the website so you can have a look: www.dellekom.de

This might have to do with issue #21 - if those browsers require woff2 files and those are not being delivered correctly.

I can not open https://google-webfonts-helper.herokuapp.com. The website response is '503 Service Unavailable'.
What's happend?

I recently downloaded Source Sans Pro font and and copied the css generated. The fonts worked on internet explorer 11 but not on chrome( Version 50.0.2661.94 ).
Is my version of chrome not supported. Is there something I am missing ?

First thanks for this project. I found some fonts lastModified was updated but their version are same than before. so what means lastModified updated? Does it means font file need update or just font meta like popularity update?

No issue, just a simple thanks, man! This project saves me seriously like a few hours a week.

Maybe just buy some own domain,
because googling "heroku google font download" every time is terrible :-)

Thanks!

https://fonts.google.com/specimen/Barlow

Hello,

How can download chinese fonts there please?

I did not find any chinese font there, thanks.

Alex

Hello,

Great tool. Thank you very much for it.
If you are working with different fonts it would be very helpful that the generated css is also included into a .css file downloadable as part of the zip file.
Regards
Arthur

I'd guess that the suffixes for eot and svg below are wrong:

/* open-sans-regular - latin /
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('/fonts/open-sans-v15-latin-regular.eot'); / IE9 Compat Modes /
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('/fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('/fonts/open-sans-v15-latin-regular.woff2') format('woff2'), / Super Modern Browsers /
url('/fonts/open-sans-v15-latin-regular.woff') format('woff'), / Modern Browsers /
url('/fonts/open-sans-v15-latin-regular.ttf') format('truetype'), / Safari, Android, iOS /
url('/fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); / Legacy iOS /
}
/ open-sans-600 - latin /
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('/fonts/open-sans-v15-latin-600.eot'); / IE9 Compat Modes /
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
url('/fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
url('/fonts/open-sans-v15-latin-600.woff2') format('woff2'), / Super Modern Browsers /
url('/fonts/open-sans-v15-latin-600.woff') format('woff'), / Modern Browsers /
url('/fonts/open-sans-v15-latin-600.ttf') format('truetype'), / Safari, Android, iOS /
url('/fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); / Legacy iOS */
}

May be a parser bug.

New tab with realtime customization of generated style templates (default prefilled with CSS, LESS, SASS, ... snippets)

Hi,

Sometimes it is useful to use remote url instead of downloading fonts locally, so with the option set to use remote url CSS snippet would be generated to something like

/* merriweather-300 - cyrillic-ext */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  src: url('//fonts.gstatic.com/s/merriweather/v13/ZvcMqxEwPfh2qDWBPxn6nrR_0bxNg2oCMKP8--GWw48.eot'); /* IE9 Compat Modes */
  src: local('Merriweather Light'), local('Merriweather-Light'),
       url('//fonts.gstatic.com/s/merriweather/v13/ZvcMqxEwPfh2qDWBPxn6nrR_0bxNg2oCMKP8--GWw48.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//fonts.gstatic.com/s/merriweather/v13/ZvcMqxEwPfh2qDWBPxn6ni-KWXw7CoiyPmiAwGgQ-pk.woff2') format('woff2'), /* Super Modern Browsers */
       url('//fonts.gstatic.com/s/merriweather/v13/ZvcMqxEwPfh2qDWBPxn6ngNLn4qwG1odAuDXh3L2pVg.woff') format('woff'), /* Modern Browsers */
       url('//fonts.gstatic.com/s/merriweather/v13/ZvcMqxEwPfh2qDWBPxn6nu1UYnNJWFGShPLa3frrjI8.ttf') format('truetype'), /* Safari, Android, iOS */
       url('//fonts.gstatic.com/l/font?kit=ZvcMqxEwPfh2qDWBPxn6nt2FN73HCFuf_TNIxcXiPSI&skey=c2b76fd8ebf2629b&v=v13#Merriweather') format('svg'); /* Legacy iOS */
}
...

so CSS code could be selected and used right away without the need to download archive.

Mutliple Application Errors encountered trying to download:
https://google-webfonts-helper.herokuapp.com/api/fonts/alegreya-sans?download=zip&subsets=latin&variants=700,regular,italic,700italic

Add support to embed fonts into the css with base64

The content-length header would ease the calculation of the progress of the download.

So far it seems to be not so easy / not possible without doing a bigger refactor and using a Promise-based approach for some internal methods. And with the current NodeJS versin we can not yet use the native Promise implementation.

https://node.green/#ES2015-built-ins-Promise

Maybe I am missing something, but when I download the fonts, the ttf files are missing. A few weeks ago when I used the app, it included ttf.

Hey, wondering if there is a way to download previous versions of a font. For example I'd like to download v12 of Oswald rather than v13, possible?

Just tried pulling Monsterrat's data and its missing every weight/style except 400 & 700. I ran it locally to get the updated data.

What license is this code under? I can recommend GPLv3 :)

Hi, it would be very useful if the fonts list would be in the corresponding font.
Greetings Lukas

Thank you for this tool. It's working great for me. Anyways I'd suggest to include the original license file that comes with Google Webfonts when you download it from Google directly.

Great project, thanks!

Would be great if there was a tab for woff2+woff that would use woff2 for supporting browsers (e.g. Chrome) but fallback to woff for others. That way you could support the faster/better compression of woff2 anywhere it's supported (currently Chrome), but woff in all other "modern" browsers.

Right now the woff2 tab only provides woff2, whereas the 'Best support' tab provides multiple options.

Is adding support for Material Icons something you can reconsider? Saw that #30 is closed. I am using google-fonts-webpack-plugin to pull the fonts at compile stage and would like to be able to also specify the Material Icons font. 😄

Registry Expiry Date: 2016-09-29T10:58:43.792Z

https://github.com/majodev/google-webfonts-helper/search?utf8=%E2%9C%93&q=ranf.tl&type=Code

Really Super-Duper-Helpful

Thanks.

I'm studying web dev on a tight data budget so I'm cutting bits from everywhere in my home dev environment. This really helped and I look forward to using it more in the future.

I wish I could find something similar for font-awesome and bootstrap.

Is there any way to load several fonts at once in the helper?
Kind of like how in the actual API we can do stuff like https://fonts.googleapis.com/css?family=Montserrat|Quicksand|etc.etc. to load a bunch of fonts in one line.

And thank you for creating such a useful webapp!

It would be great, if it would be possible to paste an URL to Google Web Fonts and let the webfonts helper extract the linked fonts automatically.

Let's say I would paste the following URL:

 http://fonts.googleapis.com/css?family=Cabin:400,700|Ubuntu+Mono

Then the fonts Cabin 400, Cabin 700 and Ubuntu Mono should be selected automatically.

The full TTF URLs are available via https://developers.google.com/fonts/docs/developer_api and those TTFs should be used by this service, because those are the ones actually being served to users and offered for download from the GF directory 'download collection' service.

Travis CI is currently not enabled.

It would be good to have it enabled and running for PRs and commits to ensure that we can use the code on Node.js 8 and 10 and catch bugs.

Google hosts the Material Icon font collection under google fonts, but it is not listed on the main page. Adding it to this tool may help other people out.

Link is here:
https://fonts.googleapis.com/icon?family=Material+Icons

more information here:
http://google.github.io/material-design-icons/

https://www.google.com/fonts/earlyaccess

Some of the fonts have been in early access for years now :(

the woff2 font download has not font effect

This doesn't work for IE 11. It's picking up the eot files.

http://www.webpagetest.org/result/151214_7Y_13G7/1/details/

Hello,

You really did a great work! my question is how to host font in Wordpress?

Unfornately, I am not technical background, so how to Host google fonts on our local server? is there a plugin to do fetch google fonts and save on server automatically?

I am using a theme which provide quick CSS option, I can input the CSS there.

would you please let me know where or which directory of fold I should upload these fonts I download from your site please?

Thanks.

Alex

The CSS listed in the web UI doesn't match the font file names when downloading via the API. Fonts with the Cyrillic subset seem to be effected the most.

Example: Seymour One
CSS: seymour-one-v4-latin-ext_latin_cyrillic-regular.eot
File: seymour-one-v4-cyrillic_latin-ext_latin-regular.eot

For whatever reason the github stars frame gets requested over http and gets blocked.
Even though on further inspection the source of the iframe is:
https://ghbtns.com/github-btn.html?user=majodev&repo=google-webfonts-helper&type=watch&count=true&size=large

Reproduced in:
Chrome 50.0.2661.94 m
Opera 37.0

Service is currently down, investigating...

$ npm start

> [email protected] start /Users/majo/Bitsync/projects/google-webfonts-helper
> node server/app.js

Express server listening on 9000, in development mode
fonts cached and initialized. num fonts: 728 num unique subset combos: 4302
GET /api/fonts 200 59ms
/Users/majo/Bitsync/projects/google-webfonts-helper/server/logic/cssFetcher.js:40
source._extracted.url = resource.src.match("http:\\/\\/[^\\)]+\\." + type)[0];
                                                                          ^
TypeError: Cannot read property '0' of null
    at /Users/majo/Bitsync/projects/google-webfonts-helper/server/logic/cssFetcher.js:40:83
    at Function.forEach (/Users/majo/Bitsync/projects/google-webfonts-helper/node_modules/lodash/dist/lodash.js:3298:15)
    at parseRemoteCSS (/Users/majo/Bitsync/projects/google-webfonts-helper/server/logic/cssFetcher.js:20:5)
    at IncomingMessage.<anonymous> (/Users/majo/Bitsync/projects/google-webfonts-helper/server/logic/cssFetcher.js:84:7)
    at IncomingMessage.emit (events.js:129:20)
    at _stream_readable.js:908:16
    at process._tickCallback (node.js:355:11)

npm ERR! Darwin 14.5.0
npm ERR! argv "node" "/usr/local/bin/npm" "start"
npm ERR! node v0.12.7
npm ERR! npm  v2.13.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `node server/app.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script 'node server/app.js'.
npm ERR! This is most likely a problem with the google-webfonts-helper package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node server/app.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls google-webfonts-helper
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/majo/Bitsync/projects/google-webfonts-helper/npm-debug.log