Use NPM or Bower to make git hosted fonts "installable"

[bnvk]

As per what @colepeters @jancborchardt @simonv3 were mentioning in #2 about how to put a font in a repo... or rather, not do it and just put a link...

How do you three (and others) feel about making a package.json file that installs fonts from git repos via NPM or bower.json using Bower. Then basically the flow to download our opensource fonts would be as follows:

• Make sure Node (or Bower) is installed
• Clone this repo
• Type npm install

At this point NPM would go out and fetch all the fonts from the various git repos where they live.

[clintonhalpin]

@bnvk It would actually be awesome to have bower and npm packages for each individual font. This repo could just show samples of the fonts and instructions on how to install via npm or bower.

On the other side it might be useful to have this repo include those packages as well so you could download them all quickly.

I'd be happy to put something together with Gidole if thats inline with what you were thinking?

[simonv3]

Where would bower / npm install install those packages?

Further question: can we get them installed in the user's font library where they're detectable by design software?

[clintonhalpin]

bower / npm would install the fonts into your web projects bower_component or node_module folder. But really you could use bower or npm install them wherever you like.

ie.

cd your/font/directory

# Multiple ways to install

npm install gidole 
bower install gidole
git clone [email protected]:gidole/sans.git

As to your further question I'm sure that it would be possible to auto install but I think font managers do a pretty good job with this. I don't use one now but I know Fontcase had this feature.

[clintonhalpin]

Example font entry

[jancborchardt]

To be honest: Using Bower or npm to install single typefaces seems damn nerdy and overly difficult.

What I meant in #2 was to have a single repo for all the typefaces, or a way to install them all at once. Downloading and installing fonts one by one is already easier than using Bower/npm to do it ;)

[bnvk]

@jancborchardt I'm not saying not providing a list for people who are scared / don't want to learn about the command line. Yes, by all means, add a font to the list for manual downloading first and foremost. This approach will make most sense to designers who simply want import a font to use in an image editing program

Overly difficult? For the above case designer, yes, waaaaay too complicated.

But for a front-end web developer / designer, I don't think NPM or Bower is asking too much. I think a lot of who have made a custom a Bootstrap themes are comfortable installing Node + typing npm install into a terminal. I tend agree with Rebecca Murphey on A Baseline for Front-End Developers
.

That said, if we want to scope Open Source Design to not cover any front-end related things, then yah mentioning this method of installing is confusing to designers.

[bnvk]

@clintonhalpin yah, what you propose is exactly what I'm thinking. @simonv3 the main goal is just saving time for people who wanna get the whole suit of FOSS fonts 😄

[simonv3]

That's kind of what I was getting at with my questions - great if you're a web developer, or a designer who designs straight into the browser, and all the rhetoric about unicorns and how you should be designing straight to prototypes aside, we're not there for most designers, and if we want to get non-programming designers into working on OSS, a .zip and download might just be the easiest answer.

NPM/Bower are great if you know your way around the terminal, but hardly self-evident concepts when you're someone who's used to working in Photoshop or Sketch.

On the other hand, the straight up designer might not make their way to github (which is fine), and it's entirely possible that we have a .zip of all fonts ready for download on whatever front-end of the website we create. When a developer-designer makes their way to github, they can read the readme and do the npm dance etc. We can ask font-designers to make their fonts available through NPM like you did @clintonhalpin.

(I just came back from tutoring a 14 year old on how to build a website, and it was a good reality check on how much knowledge I just assume people have).

[plastelina]

On the other hand if you are not installing your fonts via terminal (please do not assume that every one is as technical as you are), here are few links that are very useful and help you connect with designers ( typography designers) and are free for commercial use.

https://www.behance.net/collection/4860923/Free-Fonts

http://www.fontsquirrel.com/

http://www.1001fonts.com/

@simonv3 , this is what I'm trying to get across. Something that is obvious to you, might not the the case for the other person. All of us were beginners at some point. Making the entry point easier should be the goal. But this is just my point of view.

[simonv3]

This is a really good read about "the bottom rung".

[bnvk]

@simonv3 @plastelina yes, I think we should try to cater to the bottom rung and the top rung. I could forsee all of the following things being extremely helpful in bridging the dev/designer gap:

• A zip file that has all the fonts listed here
• A big shiny Download Open Source Font Bundle on our normal opensourcedesign.net website
• This repo with links to individual font files
• A NPM + Bower package that CLI friendly ppl can use

Reason being, if we leave out the "dev" friendly aspects and tools, I think we lose something in terms of bridging the gap. Additionally, doing the NPM like things make the "zip file" generation easier to do in an automated way!

[plastelina]

I didn't mean - 'let just drop the expectations', no, no. I meant to say, that it would be good to cater for all, devs, dev/designers, designers 😸 . Educating designers and devs about tools and workflows is the core here.

[clintonhalpin]

Hows this look? Covers the Download all option + Download individual fonts + Download via Nerdy tools 👍

https://github.com/clintonhalpin/fonts/blob/font-demo/README.md

[jancborchardt]

So @qwazix went ahead and submitted a pull request adding a bunch of openly licensed fonts to this repo: #4

I think that’s by far the easiest solution. Adding fonts to npm/bower really seems off, or not making things easier for the right people.

[colepeters]

I’m weighing in late on this, but as a designer who has worked both first primarily in Photoshop/Sketch, and as one who for the past few years has worked almost strictly in code and on the command line, I’d say:

• Having a big shiny “download .zip of all the files” makes great sense, both on the OSD website and here on the repo
• However for those using CLIs or working more primarily in code, I don’t see an npm/bower install all-the-fonts as being as useful, as most likely you’d only be wanting to install the fonts you’ve decided to use on the site/app in question. In this case I could see having options for individual npm/bower installs of individual fonts more desireable

…which I think means I’m in agreement with what @clintonhalpin has proposed on his font-demo branch. ;)

[bnvk]

@plastelina cool, glad we were in essence saying the same thing, I think 😁

@clintonhalpin that looks right to me, except the "Download .zip" was a link to google.com ?

@colepeters I see your point about all-the-fonts to the CLI friendly dev/igner. I think perhaps next to the "Download Individual Font" link there could be a "npm install this-certain-font" command. How do you feel about that?

[colepeters]

@bnvk That sounds on-point to me. If we want to make this a useful one-stop shop, though, we may need to include some substantial preview of each typeface; otherwise we'll need to link elsewhere for previews which might defeat the 'resourcefulness' intended by the repo. Thoughts?

[raphaelbastide]

Sorry to interrupt your interesting discussion but but those links may interest you.
https://github.com/raphaelbastide/Unified-Font-Repository and its issue pages.
http://usemodify.com/
http://fontbakery.com

[clintonhalpin]

@bnvk Just a placeholder for now!

[eighthave]

Google recently posted some kind of source for its Google Webfonts collection (aka https://www.google.com/fonts):

• https://github.com/google/fonts

I've been thinking about packaging them all for Debian/Ubuntu/Mint/etc. But npm sounds like it would make sense for a lot of platforms as well. Unfortunately, the Google collection is only the font binary files, not the source files for the fonts.