I have a template and it has a reference to a Google font like this:
<!-- language: lang-html -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
How can I download it and set it up to use in my pages which are running offline all the time?
If you'd like to explicitly declare your package dependencies or automate the download, you can add a npm package to pull in google fonts and serve locally.
Fontsource allows you to:
Self-host Open Source fonts in neatly bundled NPM packages.
You can search npm for <code>scope:fontsource <typefacename></code> to browse the available fonts like @fontsource/roboto or @fontsource/open-sans and install like this:
<!-- language: lang-bash -->
$ npm install @fontsource/roboto --save
$ npm install @fontsource/open-sans --save
For a more generic use case, there are several npm packages that will deliver fonts in two steps, first by installing the library, and then by pointing it to the font name and options you'd like to include.