Google Webfonts Helper: self-host a font in Niara theme for speed

[veganline]

The default Niara theme gets the Raleway font all the way from a google server linked from the header template, about line 51
Example.com/themes/niara/header.tpl 

You can delete that line or put comment tags round it like {*...*}

{*<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700" rel="stylesheet">*}

Example.com/themes/niara/css/global.css - the main style sheet - chooses Raleway, or Helvetica font as a backup. Helvetica is a web-safe font already in most browsers, so your site now reverts to Helvetica and becomes a bit faster. You can see the difference on the waterfall section of a gtmetrix test. If you follow the fonts.google link you can see why: it loaded every known weight of the Raleway font for three different alphabets.

If you want to keep Raleway, at least for modern browsers
https://google-webfonts-helper.herokuapp.com/fonts/raleway?subsets=latin shows you how to download just the bits you want, such as latin default 400 weight , 500, 600 and 700. It lets you download them as a zip file with a name like raleway-v22-latin.zip. 

Download the zip file.
Upload to: example.com/themes/niara/fonts/
Extract (unzip) the font files there.

If webfonts helper isn't online, you can see the names of the latin fonts to download in the file below; they come from https://fonts.googleapis.com/css?family=Raleway. You just have to save them with the same name that the lines below call them.

The same page of webfonts helper has lines starting @font-face which you can cut and paste to the top of
Example.com/themes/niara/css/global.css

/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/raleway-v22-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/raleway-v22-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-500 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/raleway-v22-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/raleway-v22-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-600 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/raleway-v22-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/raleway-v22-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* raleway-700 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/raleway-v22-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/raleway-v22-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

That's it! After the usual cache clearance, your Helvetica site should now revert to Raleway, but be a bit faster than before. Next time you update the theme with the core updater, it will show a list of manually changed files including header.tpl as a reminder to copy the changed bits over to the new version. It keeps copies in the directory you use for the back office.

There are probably neater ways of doing this or explaining it and suggestions are welcome. I haven't tried using other fonts.

---------edit: I'd forgotten
Modules > Themeconfigurator > Displayliveconfigurator YES > View 
lets you choose some other google fonts without changing any code at all. They still take a fraction of a second to download from another site, but some might have fewer alphabets and weights than Raleway.

Edited September 18, 2021 by veganline
hosted version on herokuapp.com is offline today - added a note