Apply new font system

fonts/cormorant-garamond/font.json

@@ -0,0 +1,26 @@
+{
+  "skip": false,
+  "chapter": true,
+  "version": "16",
+  "key": "cormorant-garamond",
+  "name": "Cormorant Garamond",
+  "family": "'Cormorant Garamond'",
+  "alt": "Garamond",
+  "type": "serif",
+  "styles": ["normal", "italic"],
+  "weights": [300, 400, 500, 600, 700],
+  "charsets": ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "vietnamese"],
+  "formats": ["woff2"],
+  "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.",
+  "note": "",
+  "sources": {
+    "googleFonts": {
+      "name": "Google Fonts",
+      "url": "https://fonts.google.com/specimen/Cormorant+Garamond"
+    },
+    "googleWebfontsHelper": {
+      "name": "Google Webfonts Helper",
+      "url": "https://gwfh.mranftl.com/fonts/cormorant-garamond?subsets=cyrillic,cyrillic-ext,latin,latin-ext,vietnamese"
+    }
+  }
+}

fonts/cormorant-garamond/info.txt

@@ -1,10 +0,0 @@
-Name: Cormorant Garamond
-Family: 'Cormorant Garamond'
-Type: serif
-Styles: normal, italic
-Weights: 300, 400, 500, 600, 700
-Charsets: cyrillic, cyrillic-ext, latin, 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/font.json

@@ -0,0 +1,25 @@
+{
+  "skip": false,
+  "chapter": true,
+  "version": "19",
+  "key": "crimson-text",
+  "name": "Crimson Text",
+  "family": "'Crimson Text'",
+  "type": "serif",
+  "styles": ["normal", "italic"],
+  "weights": [400, 600, 700],
+  "charsets": ["latin", "latin-ext", "vietnamese"],
+  "formats": ["woff2"],
+  "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.",
+  "note": "",
+  "sources": {
+    "googleFonts": {
+      "name": "Google Fonts",
+      "url": "https://fonts.google.com/specimen/Crimson+Text"
+    },
+    "googleWebfontsHelper": {
+      "name": "Google Webfonts Helper",
+      "url": "https://gwfh.mranftl.com/fonts/crimson-text?subsets=latin,latin-ext,vietnamese"
+    }
+  }
+}

fonts/crimson-text/info.txt

@@ -1,10 +0,0 @@
-Name: Crimson Text
-Family: 'Crimson Text'
-Type: serif
-Styles: normal, italic
-Weights: 400, 600, 700
-Charsets: latin, 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/georgia/font.json

@@ -0,0 +1,21 @@
+{
+  "skip": false,
+  "chapter": true,
+  "version": "2.05",
+  "key": "georgia",
+  "name": "Georgia",
+  "family": "Georgia",
+  "type": "serif",
+  "styles": ["normal", "italic"],
+  "weights": [400, 700],
+  "charsets": ["cyrillic", "greek", "latin", "latin-ext"],
+  "formats": ["ttf"],
+  "about": "Although inspired by the need for - and providing - clarity at low resolutions on the screen, Georgia is a typeface resonant with typographic personality. Even at small sizes the face exudes a sense of friendliness; a feeling of intimacy many would argue has been eroded from Times New Roman through overuse. This is as much testament to the skill of the typeface's designer, Matthew Carter, as it is to any intrinsic quality of the face's design, since the small pixel spaces of the screen can be a harrowing canvas for any type designer. In Georgia, Carter has successfully managed to create a typeface family which combines high legibility with character and charm.",
+  "note": "This is a web safe font and provided by the operating system.",
+  "sources": {
+    "microsoft": {
+      "name": "Microsoft",
+      "url": "https://learn.microsoft.com/en-us/typography/font-list/georgia"
+    }
+  }
+}

fonts/helvetica-neue/font.json

@@ -0,0 +1,22 @@
+{
+  "skip": false,
+  "chapter": true,
+  "version": "",
+  "key": "helvetica-neue",
+  "name": "Helvetica Neue",
+  "family": "'Helvetica Neue'",
+  "alt": "Helvetica, Arial",
+  "type": "sans-serif",
+  "styles": ["normal", "italic"],
+  "weights": [100, 200, 300, 400, 500, 700, 900],
+  "charsets": ["latin"],
+  "formats": [],
+  "about": "Helvetica, also known by its original name Neue Haas Grotesk, is a widely used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger and Eduard Hoffmann. Helvetica Neue is a reworking of the typeface with a more structurally unified set of heights and widths. Other changes include improved legibility, heavier punctuation marks, and increased spacing in the numbers.",
+  "note": "This is a font provided by the operating system and not always available.",
+  "sources": {
+    "wikipedia": {
+      "name": "See Wikipedia",
+      "url": "https://en.wikipedia.org/wiki/Helvetica"
+    }
+  }
+}

fonts/lato/font.css

@@ -1 +1 @@
-/* stub */
+/* Lato */

fonts/lato/font.json

@@ -0,0 +1,25 @@
+{
+  "skip": false,
+  "chapter": true,
+  "version": "24",
+  "key": "lato",
+  "name": "Lato",
+  "family": "Lato",
+  "type": "sans-serif",
+  "styles": ["normal", "italic"],
+  "weights": [300, 400, 700],
+  "charsets": ["latin", "latin-ext"],
+  "formats": ["woff2"],
+  "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.",
+  "note": "",
+  "sources": {
+    "googleFonts": {
+      "name": "Google Fonts",
+      "url": "https://fonts.google.com/specimen/Lato"
+    },
+    "googleWebfontsHelper": {
+      "name": "Google Webfonts Helper",
+      "url": "https://gwfh.mranftl.com/fonts/lato?subsets=latin,latin-ext"
+    }
+  }
+}

fonts/lato/info.txt

@@ -1,11 +0,0 @@
-Skip: true
-Name: Lato
-Family: Lato
-Type: sans-serif
-Styles: normal, italic
-Weights: 300, 400, 700
-Charsets: latin, 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/font.json

@@ -0,0 +1,21 @@
+{
+  "skip": false,
+  "chapter": true,
+  "version": "3",
+  "key": "open-dyslexic-3",
+  "name": "Open Dyslexic",
+  "family": "OpenDyslexic",
+  "type": "serif",
+  "styles": ["normal", "italic"],
+  "weights": [400, 700],
+  "charsets": ["latin"],
+  "formats": ["ttf"],
+  "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!",
+  "note": "",
+  "sources": {
+    "openDyslexic": {
+      "name": "OpenDyslexic",
+      "url": "https://opendyslexic.org"
+    }
+  }
+}

fonts/open-dyslexic-3/info.txt

@@ -1,10 +0,0 @@
-Name: Open Dyslexic 3
-Family: 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/font.json

@@ -1,5 +1,6 @@
 {
   "skip": true,
+  "chapter": true,
   "version": "40",
   "key": "open-sans",
   "name": "Open Sans",

fonts/roboto-mono/font.json

@@ -0,0 +1,25 @@
+{
+  "skip": false,
+  "chapter": true,
+  "version": "23",
+  "key": "roboto-mono",
+  "name": "Roboto Mono",
+  "family": "'Roboto Mono'",
+  "type": "monospace",
+  "styles": ["normal", "italic"],
+  "weights": [300, 400, 500, 600, 700],
+  "charsets": ["cyrillic", "cyrillic-ext", "greek", "latin", "latin-ext", "vietnamese"],
+  "formats": ["woff2"],
+  "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.",
+  "note": "",
+  "sources": {
+    "googleFonts": {
+      "name": "Google Fonts",
+      "url": "https://fonts.google.com/specimen/Roboto+Mono"
+    },
+    "googleWebfontsHelper": {
+      "name": "Google Webfonts Helper",
+      "url": "https://gwfh.mranftl.com/fonts/roboto-mono?subsets=cyrillic,cyrillic-ext,greek,latin,latin-ext,vietnamese"
+    }
+  }
+}

fonts/roboto-mono/info.txt

@@ -1,10 +0,0 @@
-Name: Roboto Mono
-Family: 'Roboto Mono'
-Type: monospace
-Styles: normal, italic
-Weights: 300, 400, 500, 600, 700
-Charsets: cyrillic, cyrillic-ext, greek, latin, 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/font.json

@@ -0,0 +1,25 @@
+{
+  "skip": false,
+  "chapter": true,
+  "version": "13",
+  "key": "roboto-serif",
+  "name": "Roboto Serif",
+  "family": "'Roboto Serif'",
+  "type": "serif",
+  "styles": ["normal", "italic"],
+  "weights": [300, 400, 500, 600, 700],
+  "charsets": ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "vietnamese"],
+  "formats": ["woff2"],
+  "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.",
+  "note": "",
+  "sources": {
+    "googleFonts": {
+      "name": "Google Fonts",
+      "url": "https://fonts.google.com/specimen/Roboto+Serif"
+    },
+    "googleWebfontsHelper": {
+      "name": "Google Webfonts Helper",
+      "url": "https://gwfh.mranftl.com/fonts/roboto-serif?subsets=cyrillic,cyrillic-ext,latin,latin-ext,vietnamese"
+    }
+  }
+}

fonts/roboto-serif/info.txt

@@ -1,10 +0,0 @@
-Name: Roboto Serif
-Family: 'Roboto Serif'
-Type: serif
-Styles: normal, italic
-Weights: 300, 400, 500, 600, 700
-Charsets: cyrillic, cyrillic-ext, latin, 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

includes/functions/_theme_setup.php

@@ -1045,7 +1045,7 @@ if ( ! function_exists( 'fictioneer_output_head_meta' ) ) {
    * Output HTML <head> meta
    *
    * @since 5.0.0
-   * @since 5.10.0 - Refactor for bundled font stylesheet.
+   * @since 5.10.0 - Refactor for font manager.
    */
 
   function fictioneer_output_head_meta() {

includes/functions/_utility.php

@@ -1960,39 +1960,38 @@ if ( ! function_exists( 'fictioneer_get_fonts' ) ) {
    * Returns array of font items
    *
    * @since 5.1.1
+   * @since 5.10.0 - Refactor for font manager.
    *
    * @return array Font items (css, name, and alt).
    */
 
   function fictioneer_get_fonts() {
-    // Make sure 'Open Sans' is always in first or second place
-    if ( FICTIONEER_PRIMARY_FONT_CSS !== 'Open Sans' ) {
-      $fonts = array(
-        ['css' => FICTIONEER_PRIMARY_FONT_CSS, 'name' => FICTIONEER_PRIMARY_FONT_NAME],
-        ['css' => 'Open Sans', 'name' => _x( 'Open Sans', 'Font name.', 'fictioneer' )]
-      );
-    } else {
-      $fonts = array(
-        ['css' => FICTIONEER_PRIMARY_FONT_CSS, 'name' => FICTIONEER_PRIMARY_FONT_NAME]
-      );
+    // Make sure fonts are set up!
+    if (
+      ! get_option( 'fictioneer_chapter_fonts' ) ||
+      ! is_array( get_option( 'fictioneer_chapter_fonts' ) )
+    ) {
+      fictioneer_build_bundled_fonts();
     }
 
-    // Setup default fonts
-    $fonts = array_merge(
-      $fonts,
-      array(
-        ['css' => '', 'name' => _x( 'System Font', 'Font name.', 'fictioneer' )],
-        ['css' => 'Lato', 'name' => _x( 'Lato', 'Font name.', 'fictioneer' )],
-        ['css' => 'Helvetica Neue', 'name' => _x( 'Helvetica Neue', 'Font name.', 'fictioneer' ), 'alt' => 'Arial'],
-        ['css' => 'Georgia', 'name' => _x( 'Georgia', 'Font name.', 'fictioneer' )],
-        ['css' => 'Roboto Mono', 'name' => _x( 'Roboto Mono', 'Font name.', 'fictioneer' )],
-        ['css' => 'Roboto Serif', 'name' => _x( 'Roboto Serif', 'Font name.', 'fictioneer' )],
-        ['css' => 'Cormorant Garamond', 'name' => _x( 'Cormorant Garamond', 'Font name.', 'fictioneer' ), 'alt' => 'Garamond'],
-        ['css' => 'Crimson Text', 'name' => _x( 'Crimson Text', 'Font name.', 'fictioneer' )],
-        ['css' => 'OpenDyslexic', 'name' => _x( 'Open Dyslexic', 'Font name.', 'fictioneer' )]
-      )
+    // Setup
+    $custom_fonts = get_option( 'fictioneer_chapter_fonts' );
+    $fonts = array(
+      array( 'css' => "'" . FICTIONEER_PRIMARY_FONT_CSS . "'", 'name' => FICTIONEER_PRIMARY_FONT_NAME ),
+      array( 'css' => '', 'name' => _x( 'System Font', 'Font name.', 'fictioneer' ) )
     );
 
+    // Build final font array
+    foreach ( $custom_fonts as $custom_font ) {
+      if (
+        ! in_array( $custom_font, $fonts ) &&
+        $custom_font['name'] !== FICTIONEER_PRIMARY_FONT_NAME &&
+        $custom_font['css'] !== FICTIONEER_PRIMARY_FONT_CSS
+      ) {
+        $fonts[] = $custom_font;
+      }
+    }
+
     // Apply filters and return
     return apply_filters( 'fictioneer_filter_fonts', $fonts );
   }
@@ -2782,6 +2781,7 @@ function fictioneer_build_bundled_fonts() {
   $bundled_fonts = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css';
   $fonts = fictioneer_get_font_data();
   $combined_font_css = '';
+  $font_stack = [];
 
   // Make sure directory exists
   if ( ! file_exists( dirname( $bundled_fonts ) ) ) {
@@ -2790,13 +2790,22 @@ function fictioneer_build_bundled_fonts() {
 
   // Build
   foreach ( $fonts as $font ) {
-    if ( $font['skip'] ?? 0 ) {
-      continue;
+    if ( $font['chapter'] ?? 0 ) {
+      $font_stack[ $font['key'] ] = array(
+        'css' => $font['family'] ?? '',
+        'name' => $font['name'] ?? '',
+        'alt' => $font['alt'] ?? ''
+      );
     }
 
-    $combined_font_css .= file_get_contents( $font['css_file'] );
+    if ( ! ( $font['skip'] ?? 0 ) ) {
+      $combined_font_css .= file_get_contents( $font['css_file'] );
+    }
   }
 
+  // Update options
+  update_option( 'fictioneer_chapter_fonts', $font_stack, true );
+
   // Save
   file_put_contents( $bundled_fonts, $combined_font_css );
 }

src/js/chapter.js

@@ -556,11 +556,11 @@ function fcn_setFormatting(value) {
     index = fcn_clamp(0, fictioneer_fonts.length - 1, index);
 
     // Prepare font family
-    let fontFamily = `"${fictioneer_fonts[index].css}"`;
+    let fontFamily = fictioneer_fonts[index].css;
 
     // Add alternative fonts if any
     if (fictioneer_fonts[index].alt) {
-      fontFamily = `${fontFamily}, "${fictioneer_fonts[index].alt}"`;
+      fontFamily = `${fontFamily}, ${fictioneer_fonts[index].alt}`;
     }
 
     // Catch non-indexed values
@@ -575,7 +575,7 @@ function fcn_setFormatting(value) {
 
     // Update inline style
     _$$('.chapter-font-family').forEach(element => {
-      element.style.fontFamily = fontFamily === '""' ? 'var(--ff-system)' : fontFamily + ', var(--ff-system)';
+      element.style.fontFamily = fontFamily === '' ? 'var(--ff-system)' : fontFamily + ', var(--ff-system)';
     });
 
     // Update local storage