Show all fonts in Fonts setting page

fonts/cormorant-garamond/info.txt

@@ -0,0 +1,10 @@
+Name: Cormorant Garamond
+CSS: 'Cormorant Garamond'
+Type: serif
+Styles: normal, italic
+Weights: 300, 400, 500, 600, 700
+Charsets: Cyrillic (Ext.), Latin (Ext.), Vietnamese
+Formats: woff2
+Version: 16
+About: Cormorant is a free display type family developed by Christian Thalmann. While this project was heavily inspired by Claude Garamont's immortal legacy, Christian did not use any specific font as a starting point or direct reference for the designs. Most glyphs were drawn from scratch; when he needed guidance on a specific character, he searched for the term Garamond and skimmed through the results for a general impression.
+Sources: Google Fonts|https://fonts.google.com/specimen/Cormorant+Garamond ||| Google Webfonts Helper|https://gwfh.mranftl.com/fonts/cormorant-garamond?subsets=cyrillic,cyrillic-ext,latin,latin-ext,vietnamese

fonts/crimson-text/info.txt

@@ -0,0 +1,10 @@
+Name: Crimson Text
+CSS: 'Crimson Text'
+Type: serif
+Styles: normal, italic
+Weights: 400, 600, 700
+Charsets: Latin (Ext.), Vietnamese
+Formats: woff2
+Version: 19
+About: Crimson Text is a font family for book production in the tradition of beautiful oldstyle typefaces. There are a lot of great free fonts around, but one kind is missing: those Garamond-inspired types with all the little niceties like oldstyle figures, small caps, fleurons, math characters and the like. In fact, a lot of time is spend developing free knock-offs of ugly "standards" like Times and Helvetica. Crimson Text is inspired by the fantastic work of people like Jan Tschichold, Robert Slimbach and Jonathan Hoefler. We hope that the free type community will one day be able to enjoy Crimson Text as a beautiful workhorse.
+Sources: Google Fonts|https://fonts.google.com/specimen/Crimson+Text ||| Google Webfonts Helper|https://gwfh.mranftl.com/fonts/crimson-text?subsets=latin,latin-ext,vietnamese

fonts/lato/info.txt

@@ -0,0 +1,10 @@
+Name: Lato
+CSS: Lato
+Type: sans-serif
+Styles: normal, italic
+Weights: 300, 400, 700
+Charsets: Latin (Ext.)
+Formats: woff2
+Version: 24
+About: Lato is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google. The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. “Male and female, serious but friendly. With the feeling of the Summer,” says Łukasz.
+Sources: Google Fonts|https://fonts.google.com/specimen/Lato ||| Google Webfonts Helper|https://gwfh.mranftl.com/fonts/lato?subsets=latin,latin-ext

fonts/open-dyslexic-3/info.txt

@@ -0,0 +1,10 @@
+Name: Open Dyslexic 3
+CSS: OpenDyslexic
+Type: serif
+Styles: normal, italic
+Weights: 400, 700
+Charsets: Latin
+Formats: ttf
+Version: 3
+About: OpenDyslexic is a typeface designed against some common symptoms of dyslexia. If you like the way you are able to read this page, and others, then this typeface is for you!
+Sources: OpenDyslexic|https://opendyslexic.org/download

fonts/open-sans/info.txt

@@ -1,5 +1,6 @@
 Name: Open Sans
 CSS: 'Open Sans'
+Type: sans-serif
 Styles: normal, italic
 Weights: 300, 325, 400, 500, 600, 700
 Charsets: Cyrillic (Ext.), Greek (Ext.), Hebrew, Latin (Ext.), Vietnamese

fonts/roboto-mono/info.txt

@@ -0,0 +1,10 @@
+Name: Roboto Mono
+CSS: 'Roboto Mono'
+Type: monospace
+Styles: normal, italic
+Weights: 300, 400, 500, 600, 700
+Charsets: Cyrillic (Ext.), Greek, Latin (Ext.), Vietnamese
+Formats: woff2
+Version: 23
+About: Roboto Mono is a monospaced addition to the Roboto type family. Like the other members of the Roboto family, the fonts are optimized for readability on screens across a wide variety of devices and reading environments. While the monospaced version is related to its variable width cousin, it doesn’t hesitate to change forms to better fit the constraints of a monospaced environment.
+Sources: Google Fonts|https://fonts.google.com/specimen/Roboto+Mono ||| Google Webfonts Helper|https://gwfh.mranftl.com/fonts/roboto-mono?subsets=cyrillic,cyrillic-ext,greek,latin,latin-ext,vietnamese

fonts/roboto-serif/info.txt

@@ -0,0 +1,10 @@
+Name: Roboto Serif
+CSS: 'Roboto Serif'
+Type: serif
+Styles: normal, italic
+Weights: 300, 400, 500, 600, 700
+Charsets: Cyrillic (Ext.), Latin (Ext.), Vietnamese
+Formats: woff2
+Version: 13
+About: Roboto Serif is a variable typeface family designed to create a comfortable and frictionless reading experience. Minimal and highly functional, it is useful anywhere (even for app interfaces) due to the extensive set of weights and widths across a broad range of optical sizes. While it was carefully crafted to work well in digital media, across the full scope of sizes and resolutions we have today, it is just as comfortable to read and work in print media.
+Sources: Google Fonts|https://fonts.google.com/specimen/Roboto+Serif ||| Google Webfonts Helper|https://gwfh.mranftl.com/fonts/roboto-serif?subsets=cyrillic,cyrillic-ext,latin,latin-ext,vietnamese

fonts/system-font/info.txt

@@ -0,0 +1,6 @@
+Stub: stub
+Name: System Font
+CSS: var(--ff-system)
+Styles: normal, italic
+Weights: 300, 400, 500, 600, 700
+About: <p>This is the default system font stack: <code>'-apple-system', 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;</code></p>

includes/functions/settings/_settings_page_fonts.php

@@ -47,18 +47,32 @@ if ( is_dir( $font_dir ) ) {
   <div class="fictioneer-settings__content">
     <div class="fictioneer-single-column">
 
+      <div class="fictioneer-card">
+        <div class="fictioneer-card__wrapper">
+          <div class="fictioneer-card__content">
+            <div class="fictioneer-card__row">
+              <p><?php
+                _e( 'Currently, this is only for your information, you cannot actually do anything here yet. Future updates may extend the functionality.', 'fictioneer' );
+              ?></p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <?php foreach ( $fonts as $key => $font ) : ?>
 
         <?php
           $name = $font['name'] ?? $key;
           $css = $font['css'] ?? _x( 'n/a', 'Settings font card.', 'fictioneer' );
-          $version = $font['version'] ?? 'XX';
+          $type = $font['type'] ?? '';
+          $stub = $font['stub'] ?? false;
+          $version = $font['version'] ?? '';
           $charsets = $font['charsets'] ?? _x( 'n/a', 'Settings font card.', 'fictioneer' );
           $formats = $font['formats'] ?? _x( 'n/a', 'Settings font card.', 'fictioneer' );
           $about = $font['about'] ?? _x( 'No description provided', 'Settings font card.', 'fictioneer' );
           $weights = $font['weights'] ?? _x( 'n/a', 'Settings font card.', 'fictioneer' );
           $styles = $font['styles'] ?? _x( 'n/a', 'Settings font card.', 'fictioneer' );
-          $sources = explode( '|||', $font['sources'] ?? '' );
+          $sources = empty( $font['sources'] ?? '' ) ? '' : explode( '|||', $font['sources'] );
           $links = [];
           $note = $font['note'] ?? '';
 
@@ -80,7 +94,13 @@ if ( is_dir( $font_dir ) ) {
 
         <div class="fictioneer-card">
           <div class="fictioneer-card__wrapper">
-            <h3 class="fictioneer-card__header"><?php printf( '%s (v%d)', $name, $version ); ?></h3>
+            <h3 class="fictioneer-card__header"><?php
+              echo $name;
+
+              if ( ! empty( $version ) ) {
+                echo " ({$version})";
+              }
+            ?></h3>
 
             <div class="fictioneer-card__content">
 
@@ -133,7 +153,13 @@ if ( is_dir( $font_dir ) ) {
                   <div class="fictioneer-card__box-title"><?php
                     _ex( 'CSS', 'Settings font card.', 'fictioneer' );
                   ?></div>
-                  <div class="fictioneer-card__box-content"><?php echo $css; ?></div>
+                  <div class="fictioneer-card__box-content"><?php
+                    echo $css;
+
+                    if ( ! empty( $type ) ) {
+                      echo ", {$type}";
+                    }
+                  ?></div>
                 </div>
 
                 <div class="fictioneer-card__box" style="flex-grow: 8;">

src/scss/fonts.scss

@@ -340,8 +340,7 @@
   font-family: "OpenDyslexic";
   src: local("OpenDyslexic3 Regular"),
        local("OpenDyslexic3-Regular"),
-       url("../fonts/OpenDyslexic3/OpenDyslexic3-Regular.ttf"),
-       url("../fonts/OpenDyslexic2/OpenDyslexic-Regular.otf");
+       url("../fonts/open-dyslexic-3/OpenDyslexic3-Regular.ttf");
   font-weight: 400;
   font-display: swap;
 }
@@ -350,8 +349,7 @@
   font-family: "OpenDyslexic";
   src: local("OpenDyslexic3 Bold"),
        local("OpenDyslexic3-Bold"),
-       url("../fonts/OpenDyslexic3/OpenDyslexic3-Bold.ttf"),
-       url("../fonts/OpenDyslexic2/OpenDyslexic-Bold.otf");
+       url("../fonts/open-dyslexic-3/OpenDyslexic3-Bold.ttf");
   font-weight: 700;
   font-display: swap;
 }