Add (local) custom fonts (using @font-face).

The static font files have been added in a 'fonts' directory.

fiches/static/fiches/css/annuaire.css

@@ -1,4 +1,33 @@
 @charset "UTF-8";
+/* fira-sans-regular - latin */
+@font-face {
+  font-family: "Fira Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Fira Sans Regular"), local("FiraSans-Regular"), url("../fonts/fira-sans/fira-sans-v10-latin-regular.woff2") format("woff2"), url("../fonts/fira-sans/fira-sans-v10-latin-regular.woff") format("woff");
+}
+/* fira-sans-italic - latin */
+@font-face {
+  font-family: "Fira Sans";
+  font-style: italic;
+  font-weight: 400;
+  src: local("Fira Sans Italic"), local("FiraSans-Italic"), url("../fonts/fira-sans/fira-sans-v10-latin-italic.woff2") format("woff2"), url("../fonts/fira-sans/fira-sans-v10-latin-italic.woff") format("woff");
+}
+/* fira-sans-700 - latin */
+@font-face {
+  font-family: "Fira Sans";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Fira Sans Bold"), local("FiraSans-Bold"), url("../fonts/fira-sans/fira-sans-v10-latin-700.woff2") format("woff2"), url("../fonts/fira-sans/fira-sans-v10-latin-700.woff") format("woff");
+}
+/* fira-sans-700italic - latin */
+/* source-code-pro-regular - latin */
+@font-face {
+  font-family: "Source Code Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Source Code Pro Regular"), local("SourceCodePro-Regular"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff") format("woff");
+}
 #main-menu a a, #account-area a, a {
   text-decoration: none;
   color: #FFDC00;
@@ -175,7 +204,7 @@ body {
   text-align: center;
 }
 #account-area .clipper {
-  font-family: "Source Code Pro", monospace;
+  font-family: "Source Code Pro", sans-serif;
 }
 
 #content-area {

fiches/static/fiches/scss/_common.scss

@@ -1,3 +1,4 @@
+@use "fonts";
 @use "colors";
 @use "links";
 
@@ -20,7 +21,7 @@ body {
 
     background-color: colors.$page-background;
     color: colors.$page-text;
-    font-family: "Fira Sans", "Roboto", sans-serif;
+    font-family: fonts.$regular-fonts;
 }
 
 #aside {

fiches/static/fiches/scss/_fonts.scss

@@ -0,0 +1,69 @@
+// Define custom font faces and provide the font files
+// in case the user does not have the fonts installed on their system.
+
+// The code was generated by the handy google-webfont-helper tool!
+// Only a few weights are included, and the files should only cover the latin charset.
+// The code below (and the font files) can be easily modified to include more characters if need be;
+// you can use the config. options provided by the google-webfont-helper tool to that end
+// (see e.g. https://google-webfonts-helper.herokuapp.com/fonts/fira-sans).
+
+/* fira-sans-regular - latin */
+@font-face {
+    font-family: "Fira Sans";
+    font-style: normal;
+    font-weight: 400;
+    src: local("Fira Sans Regular"), local("FiraSans-Regular"),
+    url("../fonts/fira-sans/fira-sans-v10-latin-regular.woff2") format("woff2"),
+    url("../fonts/fira-sans/fira-sans-v10-latin-regular.woff") format("woff");
+}
+
+/* fira-sans-italic - latin */
+@font-face {
+    font-family: "Fira Sans";
+    font-style: italic;
+    font-weight: 400;
+    src: local("Fira Sans Italic"), local("FiraSans-Italic"),
+    url("../fonts/fira-sans/fira-sans-v10-latin-italic.woff2") format("woff2"),
+    url("../fonts/fira-sans/fira-sans-v10-latin-italic.woff") format("woff");
+}
+
+/* fira-sans-700 - latin */
+@font-face {
+    font-family: "Fira Sans";
+    font-style: normal;
+    font-weight: 700;
+    src: local("Fira Sans Bold"), local("FiraSans-Bold"),
+    url("../fonts/fira-sans/fira-sans-v10-latin-700.woff2") format("woff2"),
+    url("../fonts/fira-sans/fira-sans-v10-latin-700.woff") format("woff");
+}
+
+// Since no bold text uses italics in the current design of the website,
+// there is no need for the user to load the relateds font files
+// In case it is needed because of changes in the design
+// simply uncomment the code below to support bold italics!
+
+/* fira-sans-700italic - latin */
+// @font-face {
+//     font-family: "Fira Sans";
+//     font-style: italic;
+//     font-weight: 700;
+//     src: local("Fira Sans Bold Italic"), local("FiraSans-BoldItalic"),
+//     url("../fonts/fira-sans/fira-sans-v10-latin-700italic.woff2") format("woff2"),
+//     url("../fonts/fira-sans/fira-sans-v10-latin-700italic.woff") format("woff");
+// }
+
+/* source-code-pro-regular - latin */
+@font-face {
+    font-family: "Source Code Pro";
+    font-style: normal;
+    font-weight: 400;
+    src: local("Source Code Pro Regular"), local("SourceCodePro-Regular"),
+    url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff2") format("woff2"),
+    url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff") format("woff");
+}
+
+
+
+// Font-family values
+$regular-fonts: "Fira Sans", "Roboto", sans-serif;
+$monospace-fonts: "Source Code Pro", sans-serif;

fiches/static/fiches/scss/_header.scss

@@ -1,3 +1,4 @@
+@use "fonts";
 @use "colors";
 @use "links";
 
@@ -158,6 +159,6 @@ $account-area-height: 120px;
     @extend %menu-link;
 
     .clipper {
-        font-family: "Source Code Pro", monospace;
+        font-family: fonts.$monospace-fonts;
     }
 }