google font splitter

google-font-splitter

A tool to download the online font files provided by Google-font to your local site.

The online fonts provided by Google-font use unicode-range for font package segmentation, which can effectively improve the loading speed of fonts.

However, due to network, environment and other issues, some projects cannot reference Google fonts normally, so this tool will download the specified Google online to locally to facilitate the project to directly reference locally.

Install

Requirements: node 12+

npm install -g google-font-splitter

How to use

The use of this tool is divided into two steps, obtaining online font links and downloading font files.

Step 1: Get online font links

Open Google Fonts and search to select the font you want to download.

Scroll down on the Font Details page to find Styles and click the Select this style button to the right of the font you want to use.

Find the online font link below the Selected family panel on the right and copy it out (just a link, no need to copy the entire line link tag):

Step 2: Download the font file

Find an empty folder and execute the following command:

google-font-splitter " https://你复制出的在线字体链接"
# 例如 google-font-splitter "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap"

After Enter, the tool will print the following output:

 downloading entry css file...
recast entry file and generating font download tasks...
save entry css file...
downloading font source ======================================== 100% 291/291
download complate, save to D:projectgoogle-font-splitterfont-resultnoto-sans-sc

Then you can find the downloaded font folder in the folder on the last line of the log, the directory is as follows:

 noto-sans-sc
├── s/notosanssc/xxx/...
└── noto-sans-sc.css

Contains a folder that stores split font files and a css file with the same name as the directory. This css file is the entry file. Just copy the folder into your project and reference it using the <link /> tag.

Command line parameters and configuration items

You can use the --help parameter to view help information at any time.

• Parameter url

  The tool only accepts one parameter, i.e. the online font link of Google fonts, make sure that the link points to a css file.

• Configuration item -r, --root <path>

  The font entry css file introduces the path prefix of the font source file, which defaults to the same-level relative path ( so by default, you need to place the entry css and font source files in the same-level directory ).

  You can use this parameter to specify the storage location of the font source file. For example, store fonts on a separate CDN network:

   google-font-splitter "https://fonts.googleapis.com/..." -r https://your-custom-cdn/public/fonts/
  

• Configuration item -d, --dist <savePath>

  The default location where the font file is to be downloaded is ./font-result .

• Configuration item -n, --name <fileName>

  The name of the font entry file, that is, the name of the folder in the download directory and the name of the entry css file inside it.

  By default, it will be parsed from the provided Google fonts link, and the current millisecond timestamp will be used when the resolution fails.

• Configuration item -c, --concurrent <number>

  The number of concurrency when downloading split font source files, defaults to 30.

Quoting in a project

The way to use is very simple, you just need to use <link href="xxx.css" rel="stylesheet"> to introduce the downloaded font entry file.

Here are some common framework references (assuming that the downloaded font files are stored in the noto-sans-sc folder, and the entry file is noto-sans-sc/noto-sans-sc.css ):

vue2 (vue-cli)

Copy the downloaded font folder into /public of the vue2 project.

Refer to the font entry file in /public/index.html :

 < link href =" <%= BASE_URL %>noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Then set the font-family where you need it:

 # app {
  font-family : 'Noto Sans SC' , sans-serif;
}

vue3 (vite)

Copy the downloaded font folder into /public of the vite project.

Refer to the font entry file in /index.html :

 <!-- 注意 vite 项目直接从根目录引用 public 中的文件即可 -->
< link href =" /noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Finally, set the font-family where needed.

react(create-react-app)

First copy the downloaded font folder into /public of the react project.

Then refer to the font entry file in /public/index.html :

 < link href =" %PUBLIC_URL%/noto-sans-sc/noto-sans-sc.css " rel =" stylesheet " >

Finally, set the font-family where needed.

license

See Google-fonts license for details.

refer to

This tool uses the following dependency development: fs-extra chalk node-fetch css-tree.