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.
Script can be "installed" manually by cloning ./main.js
file or with NPM:
npm install get-google-fonts
For example CSS with fonts used like this:
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic' rel='stylesheet'>
Can be replaced with:
<link href='fonts/fonts.css' rel='stylesheet'>
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
-o, --output [STRING] Output directory (Default is ./fonts)
-p, --path [STRING] Path placed before every source of font in CSS (Default is ./)
-c, --css [STRING] Name of CSS file (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
-q, --quiet Don't displays a lot of useful information
-b, --base64 Save fonts inside CSS file as base64 URIs
--non-strict-ssl Force to accepts only valid SSL certificates; in some
cases,such proxy or self-signed certificates
should be turned off
-w, --overwriting Allows overwrite existing files
--print-options Shows result options object without performing any
action
-s, --simulate 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"
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.
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()
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!')
})
Generate URL of Google Fonts using given parameters.
Parameters:
families
Object of fonts names and weightssubsets
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
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,
// Force to accepts only valid SSL certificates; in some cases,
// such proxy or self-signed certificates should be turned off
strictSSL: true,
// Allows overwrite existing files.
overwriting: false,
// Displays a lot of useful information.
verbose: false,
// Simulation; No file will be saved.
simulate: false
}
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.
This project is licensed under the Apache-2.0 License - see the LICENSE.md file for details