philippdieter / get-google-fonts

Downloads and adapts Google fonts to working offline

Get Google Fonts

Script downloading CSS file with fonts and adapt it to working in closed environment/offline. Useful for example when project must to be ran in network without connection with internet or when you make application based on projects like Electron.

Getting Started

Script can be "installed" manually by cloning ./main.js file or with NPM:

npm install get-google-fonts

Example Result

For example CSS with fonts used like this:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,700&amp;subset=cyrillic' rel='stylesheet'>

Can be replaced with:

<link href='fonts/fonts.css' rel='stylesheet'>

Using in command line

Using in command line it's possible when script is installed as global or you know full path to cli.js file. By default NPM will prefer to install script as global and after that scripts will share file in bin directory named get-google-fonts. Then you can just to use that command anywhere.

Usage:
  get-google-fonts [OPTIONS] [ARGS]

Options:
  -i, --input URL        Input URL of CSS with fonts. Works best with google-fonts but not only.
  -o, --output [STRING]  Output directory when where all files will be saved.
                         According to this path, relative paths will be resolved. (Default is ./fonts)
  -p, --path [STRING]    Path placed before every source of font in CSS.
                         It's also can be URL of your website. (Default is ./)
  -c, --css [STRING]     Name of CSS file. Like other files
                         will be placed relative to output directory (Default is fonts.css)
  -t, --template STRING  Template of font filename. (Default is {_family}-{weight}-{comment}{i}.{ext})
  -u, --useragent STRING User-agent used at every connection. Accordingly, Google Fonts will
                         send the appropriate fonts. For example, providing a wget's
                         user-agent will end with the download of .ttf fonts.
                         Default user-agent downloads .woff2 fonts.
  -q, --quiet TRUE       Don't displays a lot of useful information. Inverse of "verbose".
  -b, --base64 TRUE      Save fonts inside CSS file as base64 URIs
  -w, --overwriting TRUE Allows overwrite existing files.
  -s, --simulate TRUE    Simulation; No file will be saved.
  -h, --help             Display help and usage details.

To get a result like in Example, just enter the command in the folder with the HTML file:

get-google-fonts -i "https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic"

Using in code

Get-google-fonts can be required as module.

const GetGoogleFonts = require('get-google-fonts');

To get result like in Example, just create object and run download method.

new GetGoogleFonts().download('https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic')
// => Promise

There are three useful methods in all module.

Constructor

Parameters:

• config Allows you to preconfigure all downloads done by this object. See more... [optional]

Example:

let ggf_ttf = new GetGoogleFonts({
	userAgent: 'Wget/1.18'
})
let ggf_defaults = new GetGoogleFonts()

download

Parameters:

• url URL to CSS as fonts object or plain string. Can be an array of arguments witch will be passed through GetGoogleFonts.constructUrl().
• config Allows you to configure this one downloads. See more... [optional]

Example:

ggf.download([
	{
		Roboto: [400, 700]
	},
	['cyrillic']
]).then(() => {
	console.log('Done!')
}).catch(() => {
	console.log('Whoops!')
})
// or
ggf.download('https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic', {
	userAgent: 'Wget/1.18'
}).then(() => {
	console.log('Done!')
}).catch(() => {
	console.log('Whoops!')
})

constructUrl

Generate URL of Google Fonts using given parameters.

Parameters:

• families Object of fonts names and weights
• subsets Array of subsets

Example:

GetGoogleFonts.constructUrl([
	{
		Roboto: ['400', 700],
		'Roboto': [400, '700i'],
		'Alegreya Sans SC': [300]
	},
	['cyrillic']
])
// => https://fonts.googleapis.com/css?family=Roboto:400,700,700i|Alegreya+Sans+SC:300&subset=cyrillic

Config object

Objects will be considered as follows: Download config > GetGoogleFonts object config > Default config

// Default config object
{
	// Output directory when where all files will be saved.
	// According to this path, relative paths will be resolved.
	outputDir:  './fonts',
	// Path placed before every source of font in CSS.
	// It's also can be URL of your website.
	path:       './',
	// Template of font filename.
	template:   '{_family}-{weight}-{comment}{i}.{ext}',
	// Name of CSS file. Like other files
	// will be placed relative to output directory
	cssFile:    'fonts.css',
	// User-agent used at every connection. Accordingly, Google Fonts will
	// send the appropriate fonts. For example, providing a wget's
	// user-agent will end with the download of .ttf fonts.
	// Default user-agent downloads .woff2 fonts.
	userAgent:  'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ' +
	            '(KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36',
	// Save fonts inside CSS file as base64 URIs
	base64: false,
	// Allows overwrite existing files.
	overwriting: false,
	// Displays a lot of useful information.
	verbose:     false,
	// Simulation; No file will be saved.
	simulate:    false
}

Template

Following variables can be used in the template:

• {comment} Text from comment placed before @font-face. Google place there name of subset e.g. latin
• {family} Font-family e.g. Source Sans Pro
• {_family} Font-family (whitespace will be replaced with underscore) e.g. Source_Sans_Pro
• {weight} Font-weight e.g. 400
• {filename} Name of original file e.g. ODelI1aHBYDBqgeIAH2zlC2Q8seG17bfDXYR_jUsrzg
• {ext} Original extension e.g. woff2
• {i} A number that is incremented one by one each time a font file is added. Useful to preserve the uniqueness of font names in case you are not sure if the previous variables are enough. It starts from 1.

TODO

• Some kind of .lock file for making changes based on the last known state
• CSS scanning ability for self-recognize by script what must to be downloaded (with or without watchers)

License

This project is licensed under the Apache-2.0 License - see the LICENSE.md file for details