Fonts Documentation

7 files changed, 82 insertions, 18 deletions

diff --git a/COPY-TO-ROOT-SASS/abridge.scss b/COPY-TO-ROOT-SASS/abridge.scss
index 89689b4..5facb99 100644
--- a/COPY-TO-ROOT-SASS/abridge.scss
+++ b/COPY-TO-ROOT-SASS/abridge.scss
@@ -5,7 +5,7 @@
   /// Enable a centered viewport for <header>, <main>, <footer> inside <body>
   /// Fluid layout until a defined size, then becomes centered viewport.
   //$enable-maxwidth: true,
-  $mw: 75%,// max-width
+  $mw: 70%,// max-width
   //$mb: 1200px,// value at which to switch from fluid layout to max-width
 
   $abridgeMode: "switcher",//valid values: switcher, auto, dark, light
@@ -124,14 +124,23 @@
   //$ha: 92%,// mark/highlight line
 
   /// These lines find the spot at which to insert your appended fonts.
-  //$findFont-Main: "Segoe UI",     // ← append custom MAIN font(s) AFTER this
-  //$findFont-Code: "Segoe UI Mono",// ← append custom CODE font(s) AFTER this
+  //$findFont-Main: "Segoe UI",     // ← APPEND custom MAIN font(s) AFTER this
+  //$findFont-Code: "Segoe UI Mono",// ← APPEND custom CODE font(s) AFTER this
+
+  /// If you want to prepend the font list, then use null instead:
+  //$findFont-Main: null,         // ← PREPEND custom MAIN font(s)
+  //$findFont-Code: null,         // ← PREPEND custom CODE font(s)
 
   /// These lines specify the fonts to add.
   //$fontExt-Main: (ExampleFont1, "Example Font 2"),// MAIN font(s) to add
   //$fontExt-Code: (ExampleCode1, "Example Code 2"),// CODE font(s) to add
 
-  /// If prepending/appending fonts above, then no need to change them below
+  /// If relying on installed fonts alone, then the above is all you need, if the visiting system has the intended font installed then it will use it!
+  /// However, if you want to load the Font File resource to ensure it is loaded if they do not have it, then use @use at the VERY Bottom of this file.
+  /// For a Sans based system font stack, I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo
+
+  /// If prepending/appending fonts above, then no need to change them with the 2 below lines.
+  /// The following 2 below lines give a way to hard code a font list if you prefer.
   //$font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif,
   //$font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe UI Mono" "DejaVu Sans Mono" "Liberation Mono" "Roboto Mono" "Oxygen Mono" "Ubuntu Monospace" "Ubuntu Mono" "Source Code Pro" "Fira Mono" "Droid Sans Mono" "Courier New" Courier monospace,
 
@@ -179,3 +188,12 @@
   //$grid: false,//Infinity Grid, column based layouts.
   //$syntax: true,//syntax highlighting for code blocks
 );
+/******************************************************************************
+ *   FONTS - Abridge by default uses the System Font Stack
+ *     https://css-tricks.com/snippets/css/system-font-stack/
+ *   However if you need you can load a specific font below,
+ *     make sure to have the relevant woff2 fonts in your static/fonts folder
+ *   I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo
+ *****************************************************************************/
+//@use "fonts/Roboto";
+//@use "fonts/Arimo";
diff --git a/COPY-TO-ROOT-SASS/fonts/_Arimo.scss b/COPY-TO-ROOT-SASS/fonts/_Arimo.scss
new file mode 100644
index 0000000..d3dc829
--- /dev/null
+++ b/COPY-TO-ROOT-SASS/fonts/_Arimo.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Arimo';
+    src: local("Arimo"), url("fonts/Arimo.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Arimo';
+    src: local("Arimo-Italic"), url("fonts/Arimo-Italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Arimo';
+    src: local("Arimo-Bold"), url("fonts/Arimo-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}
diff --git a/config.toml b/config.toml
index 284366f..fdb8d23 100644
--- a/config.toml
+++ b/config.toml
@@ -113,7 +113,7 @@ menu_footer = [
 ]
 
 recent = true # TOC / index
-recent_items = 9
+recent_items = 12
 
 meta_index = { position="bottom", size="s90", author=false, readtime=false, readstring="min", date=true, updated=false, categories_tags=true, divider=" " }
 meta_post = { position="top", size="s95", author=true, readtime=false, readstring="min read", date=true, updated=true, categories_tags=true, divider=" " }
@@ -281,28 +281,29 @@ favicon16 = "favicon-16x16.png" # favicon-16x16.png
 
 
 ###############################################################################
-### FONTS
-### Abridge by default uses the System Font Stack:
+### FONTS - Abridge by default uses the System Font Stack
 ###   https://css-tricks.com/snippets/css/system-font-stack/
-### The System Font Stack offers the best performance, but if you need you can load a specific font.
+### However if you need you can load a specific font below,
+###   make sure to have the relevant woff2 fonts in your static/fonts folder
+### I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo
 ###############################################################################
 
 ### For externally loaded Fonts, make sure to include the FULL url including the https prefix:
 
 #fonts = [ {url = "https://fonts.googleapis.com/css?family=Roboto:400,700,italic|Roboto+Mono:400,italic"} ]
 
-### Local fonts are defined in the css, https://github.com/Jieiku/abridge/blob/master/sass/fonts/_Roboto.scss
-### To import one include in the imports file: https://github.com/Jieiku/abridge/blob/master/sass/_imports.scss
+### Local fonts are defined in the css, https://github.com/Jieiku/abridge/tree/master/COPY-TO-ROOT-SASS/fonts/_Arimo.scss
+### To load a local font resource, look at the bottom of this file: https://github.com/Jieiku/abridge/blob/master/COPY-TO-ROOT-SASS/abridge.scss
 
-### After importing them in the CSS, You can also define them below and it will add the preload tag to the head.
+### After loading them in the CSS, You can also define them below and it will add the preload tag to the head.
 ### preloading fonts will eliminate Content Layout Shift, but will hurt with page load time. (not recommended)
 
 #fonts = [
-#    {url = "font/Roboto-Mono.woff2"},
-#    {url = "font/Roboto-Mono-Italic.woff2"},
-#    {url = "font/Roboto.woff2"},
-#    {url = "font/Roboto-Italic.woff2"},
-#    {url = "font/Roboto-Bold.woff2"},
+#    {url = "fonts/Roboto-Mono.woff2"},
+#    {url = "fonts/Roboto-Mono-Italic.woff2"},
+#    {url = "fonts/Roboto.woff2"},
+#    {url = "fonts/Roboto-Italic.woff2"},
+#    {url = "fonts/Roboto-Bold.woff2"},
 #]
 
 
diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md
index 3e2b5f3..8504e8a 100644
--- a/content/overview-images/index.fr.md
+++ b/content/overview-images/index.fr.md
@@ -55,7 +55,7 @@ Cet article couvre les **shortcodes imgswap et img**. Les images peuvent égalem
 ```
 {{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé") }}
 
-# Image SVG directement dans le code :
+# Image SVG directement dans le code
 ```html
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
 ```
diff --git a/content/overview-images/index.md b/content/overview-images/index.md
index 1545193..ed430db 100644
--- a/content/overview-images/index.md
+++ b/content/overview-images/index.md
@@ -55,7 +55,7 @@ This post covers the **imgswap and img shortcodes**. Images can also be embedded
 ```
 {{ img(src="/overview-rich-content/ferris.svg" alt="Ferris the Rustacean") }}
 
-# SVG image directly in code:
+# SVG image directly in code
 ```html
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 489" width="600" height="489"><g fill="#8f1f1d"><path d="M70 324c1 3 3 4 6 4l24 4 2 5-10 20v5l7 4 24-1 4 4-7 21c0 2 0 4 3 6 1 2 4 2 7 2l24-5 4 4-1 22c-1 2 0 4 3 5h6l23-8 6 3 4 22c0 2 1 3 3 4h7l21-13 6 2 8 20 5 5c3 0 5 0 7-2l18-15h5l13 18c1 2 3 4 6 4l5-3 14-18h6l17 16c1 1 4 2 6 1 3 0 5-1 6-3l9-21 6-1 19 14h7c3 0 5-3 5-5l4-21 6-2 22 9 7-1c2-1 3-2 3-5v-21l5-4 24 6c3 0 5 0 6-2 2-2 3-4 2-6l-4-21 3-5 24 2c4 0 6 0 7-3v-5l-9-21 3-5 25-2 5-5-1-5-14-18c0-1-1-19-12-33v-1c-26-36-106-64-201-65-100-2-184 26-206 64-10 10-12 26-11 26l-15 17c-1 3-2 5-1 7z"/><path d="M565 247c-1-3-12-2-14-3l-38 1-4-7 26-38c1-2 7-7 6-9-3-3-12 1-14 1l-39 7-4-6 22-49c0-3 7-15 5-18-2-2-11 6-13 6l-43 28-4-5 11-43c0-3 7-18 5-19-2-2-9 5-12 6l-38 30-5-4 9-51c0-3 3-18 1-19s-15 13-17 14l-30 38-6-3-3-56c0-3 0-14-3-14-3-1-5 8-8 11l-25 50-7-1-13-57c-1-3-2-12-4-12-4 0-5 10-7 13l-15 56-7 1-22-52c-1-2-4-12-7-12-3 1-2 9-3 12l-7 61-6 3-19-27c-3-1-15-19-18-18-2 1 0 21-1 23l1 40-6 4-36-35c-3-1-7-7-10-5-2 2 0 10 0 13l13 53-4 5-41-26c-2-1-10-7-12-4-2 2 3 4 3 7l22 56-5 6-65-22c-3-1-10-5-12-1-1 2 5 6 6 9l49 53-3 7-47-6c-3 0-9-1-11 1-1 4 6 7 7 9l36 40a116 116 0 0 0 14 46c27 50 110 87 209 87 105 0 193-41 214-95 11-15 13-37 12-38l29-31c2-4 9-9 8-11z"/><path d="m99 289-67 10c-13 3-5 5 0 6 14 2 84 3 85 4zm402 3 67 10c13 4 5 6 0 6-14 2-84 5-86 5z"/></g><path d="M227 293s-24-26-47 0c0 0-18 35 0 52 0 0 30 24 47 0 0 0 21-20 0-52z"/><path fill="#fff" d="M200 302c0 11 6 19 14 19 7 0 12-8 12-19 0-10-5-18-12-18-8 0-14 8-14 18z"/><path d="M360 283s-40-17-52 22c0 0-11 47 33 49 0 0 58-10 19-71z"/><path fill="#fff" d="M339 299c0 10 7 20 14 20 8 0 14-10 14-20s-6-18-14-18c-7 0-14 8-14 18z"/></svg>
 ```
diff --git a/sass/abridge.scss b/sass/abridge.scss
index 684a71d..c72689c 100644
--- a/sass/abridge.scss
+++ b/sass/abridge.scss
@@ -6,6 +6,17 @@
 @use "colors-syntax";
 
 /******************************************************************************
+ *   FONTS - Abridge by default uses the System Font Stack
+ *     https://css-tricks.com/snippets/css/system-font-stack/
+ *   However if you need you can load a specific font below,
+ *     make sure to have the relevant woff2 fonts in your static/fonts folder
+ *   This is for running the theme directly, if using abridge as a theme
+ *     use the section at the bottom of your root sass/abridge.scss
+ *   I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo
+ *****************************************************************************/
+//@use "fonts/Roboto";
+
+/******************************************************************************
  *   Variables
  *****************************************************************************/
 
diff --git a/sass/fonts/_Arimo.scss b/sass/fonts/_Arimo.scss
new file mode 100644
index 0000000..d3dc829
--- /dev/null
+++ b/sass/fonts/_Arimo.scss
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Arimo';
+    src: local("Arimo"), url("fonts/Arimo.woff2");//latin regular
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Arimo';
+    src: local("Arimo-Italic"), url("fonts/Arimo-Italic.woff2");//latin italic
+    font-style: italic;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Arimo';
+    src: local("Arimo-Bold"), url("fonts/Arimo-Bold.woff2");//latin bold
+    font-weight: bold;
+    font-display: swap;
+}