[chore] Update + add fonts for additional scripts, use locally installed font if available (#3997)

* [chore] Update + add fonts for additional scripts, use locally installed font if available

* update comments

2 files changed, 650 insertions, 22 deletions

diff --git a/web/source/css/_fonts.css b/web/source/css/_fonts.css
new file mode 100644
index 000000000..a370a312f
--- /dev/null
+++ b/web/source/css/_fonts.css
@@ -0,0 +1,646 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.	See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.	If not, see <http://www.gnu.org/licenses/>.
+*/
+
+/*
+	Standard fonts (v32)
+
+	Covered scripts:
+	- Cyrillic
+	- Devanagari
+	- Greek
+	- Vietnamese
+	- Latin
+
+	Sources:
+	- https://github.com/fontsource/font-files/tree/main/fonts/google/noto-sans
+	- https://fontsource.org/fonts/noto-sans
+*/
+
+/* noto-sans-cyrillic-ext-400-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-cyrillic-ext-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-cyrillic-ext-400-normal.woff') format('woff');
+	unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* noto-sans-cyrillic-400-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-cyrillic-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-cyrillic-400-normal.woff') format('woff');
+	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* noto-sans-devanagari-400-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-devanagari-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-devanagari-400-normal.woff') format('woff');
+	unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
+}
+
+/* noto-sans-greek-ext-400-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-greek-ext-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-greek-ext-400-normal.woff') format('woff');
+	unicode-range: U+1F00-1FFF;
+}
+
+/* noto-sans-greek-400-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-greek-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-greek-400-normal.woff') format('woff');
+	unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* noto-sans-vietnamese-400-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-vietnamese-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-vietnamese-400-normal.woff') format('woff');
+	unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* noto-sans-latin-ext-400-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-latin-ext-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-latin-ext-400-normal.woff') format('woff');
+	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* noto-sans-latin-400-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-latin-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-latin-400-normal.woff') format('woff');
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* noto-sans-cyrillic-ext-700-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-cyrillic-ext-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-cyrillic-ext-700-normal.woff') format('woff');
+	unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* noto-sans-cyrillic-700-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-cyrillic-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-cyrillic-700-normal.woff') format('woff');
+	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* noto-sans-devanagari-700-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-devanagari-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-devanagari-700-normal.woff') format('woff');
+	unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
+}
+
+/* noto-sans-greek-ext-700-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-greek-ext-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-greek-ext-700-normal.woff') format('woff');
+	unicode-range: U+1F00-1FFF;
+}
+
+/* noto-sans-greek-700-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-greek-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-greek-700-normal.woff') format('woff');
+	unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* noto-sans-vietnamese-700-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-vietnamese-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-vietnamese-700-normal.woff') format('woff');
+	unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* noto-sans-latin-ext-700-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-latin-ext-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-latin-ext-700-normal.woff') format('woff');
+	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* noto-sans-latin-700-normal */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+	url('../fonts/noto-sans-latin-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-latin-700-normal.woff') format('woff');
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* noto-sans-cyrillic-ext-400-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-cyrillic-ext-400-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-cyrillic-ext-400-italic.woff') format('woff');
+	unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* noto-sans-cyrillic-400-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-cyrillic-400-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-cyrillic-400-italic.woff') format('woff');
+	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* noto-sans-devanagari-400-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-devanagari-400-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-devanagari-400-italic.woff') format('woff');
+	unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
+}
+
+/* noto-sans-greek-ext-400-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-greek-ext-400-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-greek-ext-400-italic.woff') format('woff');
+	unicode-range: U+1F00-1FFF;
+}
+
+/* noto-sans-greek-400-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-greek-400-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-greek-400-italic.woff') format('woff');
+	unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* noto-sans-vietnamese-400-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-vietnamese-400-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-vietnamese-400-italic.woff') format('woff');
+	unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* noto-sans-latin-ext-400-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-latin-ext-400-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-latin-ext-400-italic.woff') format('woff');
+	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* noto-sans-latin-400-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-latin-400-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-latin-400-italic.woff') format('woff');
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* noto-sans-cyrillic-ext-700-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-cyrillic-ext-700-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-cyrillic-ext-700-italic.woff') format('woff');
+	unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* noto-sans-cyrillic-700-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-cyrillic-700-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-cyrillic-700-italic.woff') format('woff');
+	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* noto-sans-devanagari-700-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-devanagari-700-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-devanagari-700-italic.woff') format('woff');
+	unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;
+}
+
+/* noto-sans-greek-ext-700-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-greek-ext-700-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-greek-ext-700-italic.woff') format('woff');
+	unicode-range: U+1F00-1FFF;
+}
+
+/* noto-sans-greek-700-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-greek-700-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-greek-700-italic.woff') format('woff');
+	unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* noto-sans-vietnamese-700-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-vietnamese-700-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-vietnamese-700-italic.woff') format('woff');
+	unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* noto-sans-latin-ext-700-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-latin-ext-700-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-latin-ext-700-italic.woff') format('woff');
+	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* noto-sans-latin-700-italic */
+@font-face {
+	font-family: 'Noto Sans';
+	font-style: italic;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans'),
+		url('../fonts/noto-sans-latin-700-italic.woff2') format('woff2'),
+		url('../fonts/noto-sans-latin-700-italic.woff') format('woff');
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/*
+	Monospace fonts (v32)
+
+	Covered scripts:
+	- Cyrillic
+	- Devanagari
+	- Greek
+	- Vietnamese
+	- Latin
+
+	Sources:
+	- https://github.com/fontsource/font-files/tree/main/fonts/google/noto-sans-mono
+	- https://fontsource.org/fonts/noto-sans-mono
+*/
+
+/* noto-sans-mono-cyrillic-ext-400-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-cyrillic-ext-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-cyrillic-ext-400-normal.woff') format('woff');
+	unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* noto-sans-mono-cyrillic-400-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-cyrillic-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-cyrillic-400-normal.woff') format('woff');
+	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* noto-sans-mono-greek-ext-400-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-greek-ext-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-greek-ext-400-normal.woff') format('woff');
+	unicode-range: U+1F00-1FFF;
+}
+
+/* noto-sans-mono-greek-400-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-greek-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-greek-400-normal.woff') format('woff');
+	unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* noto-sans-mono-vietnamese-400-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-vietnamese-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-vietnamese-400-normal.woff') format('woff');
+	unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* noto-sans-mono-latin-ext-400-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-latin-ext-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-latin-ext-400-normal.woff') format('woff');
+	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* noto-sans-mono-latin-400-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 400;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-latin-400-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-latin-400-normal.woff') format('woff');
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* noto-sans-mono-cyrillic-ext-700-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-cyrillic-ext-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-cyrillic-ext-700-normal.woff') format('woff');
+	unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* noto-sans-mono-cyrillic-700-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-cyrillic-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-cyrillic-700-normal.woff') format('woff');
+	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* noto-sans-mono-greek-ext-700-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-greek-ext-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-greek-ext-700-normal.woff') format('woff');
+	unicode-range: U+1F00-1FFF;
+}
+
+/* noto-sans-mono-greek-700-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-greek-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-greek-700-normal.woff') format('woff');
+	unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
+}
+
+/* noto-sans-mono-vietnamese-700-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-vietnamese-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-vietnamese-700-normal.woff') format('woff');
+	unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* noto-sans-mono-latin-ext-700-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-latin-ext-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-latin-ext-700-normal.woff') format('woff');
+	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* noto-sans-mono-latin-700-normal */
+@font-face {
+	font-family: 'Noto Sans Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src:
+		local('Noto Sans Mono'),
+		url('../fonts/noto-sans-mono-latin-700-normal.woff2') format('woff2'),
+		url('../fonts/noto-sans-mono-latin-700-normal.woff') format('woff');
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
diff --git a/web/source/css/base.css b/web/source/css/base.css
index 6a5a6dd36..2122e5aae 100644
--- a/web/source/css/base.css
+++ b/web/source/css/base.css
@@ -23,26 +23,7 @@
 
 @import "modern-normalize/modern-normalize.css";
 @import "./_prism.css";
-
-/* noto-sans-regular - latin */
-@font-face {
-	font-family: "Noto Sans";
-	font-weight: 400;
-	font-display: swap;
-	font-style: normal;
-	src: url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'),
-		 url('../fonts/noto-sans-v27-latin-regular.woff') format('woff');
-}
-
-/* noto-sans-700 - latin */
-@font-face {
-	font-family: "Noto Sans";
-	font-weight: 700;
-	font-display: swap;
-	font-style: normal;
-	src: url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'),
-		 url('../fonts/noto-sans-v27-latin-700.woff') format('woff');
-}
+@import "./_fonts.css";
 
 /*************************************
 ***** SECTION 1: HANDY VARIABLES *****
@@ -338,11 +319,12 @@ label {
 }
 
 /*
-	Set our own nice background for
-	monospace code and pre blocks.
+	Set our own nice background and
+	font for monospace code and pre blocks.
 */
 pre, pre[class*="language-"],
 code, code[class*="language-"] {
+	font-family: "Noto Sans Mono", monospace;
 	background-color: $gray2;
 }