Add and optimize font options

epubs/_build/templates/style.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
 abbr, acronym, address, big, cite, code, del,
@@ -150,7 +149,6 @@ span.underline {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 80%;
   line-height: 1.3;
-  margin: 12px 0;
 }
 
 .toc {

fonts/open-dyslexic-3/font.css

@@ -1 +1 @@
-@font-face{font-family:"OpenDyslexic";src:local("OpenDyslexic3 Regular"),local("OpenDyslexic3-Regular"),url("../fonts/open-dyslexic-3/OpenDyslexic3-Regular.ttf");font-weight:400;font-display:swap}@font-face{font-family:"OpenDyslexic";src:local("OpenDyslexic3 Bold"),local("OpenDyslexic3-Bold"),url("../fonts/open-dyslexic-3/OpenDyslexic3-Bold.ttf");font-weight:700;font-display:swap}
+@font-face{font-family:"OpenDyslexic";src:local("OpenDyslexic3 Regular"),local("OpenDyslexic3-Regular"),url("../fonts/open-dyslexic-3/OpenDyslexic3-Regular.ttf");font-weight:400;size-adjust:85%;ascent-override:120%;font-display:swap}@font-face{font-family:"OpenDyslexic";src:local("OpenDyslexic3 Bold"),local("OpenDyslexic3-Bold"),url("../fonts/open-dyslexic-3/OpenDyslexic3-Bold.ttf");font-weight:700;size-adjust:85%;ascent-override:120%;font-display:swap}

includes/functions/_customizer-settings.php

@@ -3003,6 +3003,50 @@ function fictioneer_add_fonts_customizer_settings( $manager ) {
     )
   );
 
+  // Card title font
+  $manager->add_setting(
+    'card_title_font_family_value',
+    array(
+      'capability' => 'manage_options',
+      'sanitize_callback' => 'sanitize_text_field',
+      'default' => 'Open Sans'
+    )
+  );
+
+  $manager->add_control(
+    'card_title_font_family_value',
+    array(
+      'type' => 'select',
+      'priority' => 10,
+      'section' => 'fictioneer_fonts',
+      'label' => __( 'Card Title Font', 'fictioneer' ),
+      'description' => __( 'Used for the card titles. Default "Open Sans".', 'fictioneer' ),
+      'choices'  => $font_options
+    )
+  );
+
+  // Card list link font
+  $manager->add_setting(
+    'card_list_link_font_family_value',
+    array(
+      'capability' => 'manage_options',
+      'sanitize_callback' => 'sanitize_text_field',
+      'default' => 'Lato'
+    )
+  );
+
+  $manager->add_control(
+    'card_list_link_font_family_value',
+    array(
+      'type' => 'select',
+      'priority' => 10,
+      'section' => 'fictioneer_fonts',
+      'label' => __( 'Card List Link Font', 'fictioneer' ),
+      'description' => __( 'Used for the links in card lists. Default "Lato".', 'fictioneer' ),
+      'choices'  => $font_options
+    )
+  );
+
   // Dark mode font weight adjustment
   $manager->add_setting(
     'dark_mode_font_weight',

includes/functions/_customizer.php

@@ -545,6 +545,12 @@ if ( ! function_exists( 'fictioneer_add_customized_layout_css' ) ) {
     $font_chapter_list_title = get_theme_mod( 'chapter_list_title_font_family_value', 'Open Sans' );
     $font_chapter_list_title = $font_chapter_list_title === 'System' ? 'var(--ff-system)' : "'{$font_chapter_list_title}', var(--ff-base)";
 
+    $font_card_title = get_theme_mod( 'card_title_font_family_value', 'Open Sans' );
+    $font_card_title = $font_card_title === 'System' ? 'var(--ff-system)' : "'{$font_card_title}', var(--ff-heading)";
+
+    $font_card_list_link = get_theme_mod( 'card_list_link_font_family_value', 'Open Sans' );
+    $font_card_list_link = $font_card_list_link === 'System' ? 'var(--ff-system)' : "'{$font_card_list_link}', var(--ff-note)";
+
     // Build CSS
     $layout_css = ":root {
       --site-width: " . $site_width . "px;
@@ -561,9 +567,11 @@ if ( ! function_exists( 'fictioneer_add_customized_layout_css' ) ) {
       --ff-note: {$font_secondary};
       --ff-heading: {$font_heading};
       --ff-site-title: {$font_site_title};
+      --ff-card-title: {$font_card_title};
       --ff-story-title: {$font_story_title};
       --ff-chapter-title: {$font_chapter_title};
       --ff-chapter-list-title: {$font_chapter_list_title};
+      --ff-card-list-link: {$font_card_list_link};
     }";
 
     if ( get_theme_mod( 'use_custom_layout', false ) ) {

includes/functions/settings/_settings_page_fonts.php

@@ -58,7 +58,7 @@ $heading_font = get_theme_mod( 'heading_font_family_value', 'Open Sans' );
           <h1 style="margin-bottom: 12px;"><?php _e( 'Installed Fonts', 'fictioneer' ); ?></h1>
           <p><?php
             printf(
-              __( 'See <a href="%s" target="_blank">installation guide</a> on how to add custom fonts yourself. You can assign the primary, secondary, and heading fonts in the <a href="%s">Customizer > Layout</a>.', 'fictioneer' ),
+              __( 'See <a href="%s" target="_blank">installation guide</a> on how to add custom fonts yourself. You can assign fonts in the <a href="%s">Customizer</a>.', 'fictioneer' ),
               'https://github.com/Tetrakern/fictioneer/blob/main/INSTALLATION.md#custom-fonts',
               wp_customize_url()
             );

src/scss/_card.scss

@@ -197,8 +197,8 @@
 
   &__title {
     flex: 1 1 auto;
+    font-family: var(--ff-card-title);
     font-size: var(--card-title-font-size, clamp(15px, 3.065cqw, 18px));
-    font-family: var(--ff-heading); // Redundant for safety
 
     &._with-delete {
       padding-right: 1.75em;
@@ -405,6 +405,7 @@
     }
 
     &-link {
+      font-family: var(--ff-card-list-link);
       padding: 4px 0; // Increase link click target
     }
 

src/scss/admin/admin.scss

@@ -104,7 +104,9 @@ td.comment {
 
 #customize-control-use_custom_layout,
 #customize-control-use_custom_dark_mode,
-#customize-control-use_custom_light_mode {
+#customize-control-use_custom_light_mode,
+#customize-control-site_title_font_family_value,
+#customize-control-dark_mode_font_weight {
   padding-top: 8px;
   margin-top: 8px;
   border-top: 2px solid #dcdcde;

src/scss/common/_properties.scss

@@ -34,10 +34,12 @@
   --ff-note: 'Lato', var(--ff-base);
   --ff-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
   --ff-input: var(--ff-base);
+  --ff-card-title: var(--ff-heading);
   --ff-site-title: var(--ff-heading);
   --ff-story-title: var(--ff-heading);
   --ff-chapter-title: var(--ff-heading);
   --ff-chapter-list-title: var(--ff-base);
+  --ff-card-list-link: inherit;
 
   // === HEADER ================================================================
   --layout-header-background-height: #{get_clamp(210, 480, 320, $full-width)}; // Overridden by theme customizer

src/scss/fonts/open-dyslexic-3.scss

@@ -13,6 +13,8 @@
        local("OpenDyslexic3-Regular"),
        url("../fonts/open-dyslexic-3/OpenDyslexic3-Regular.ttf");
   font-weight: 400;
+  size-adjust: 85%;
+  ascent-override: 120%;
   font-display: swap;
 }
 
@@ -22,5 +24,7 @@
        local("OpenDyslexic3-Bold"),
        url("../fonts/open-dyslexic-3/OpenDyslexic3-Bold.ttf");
   font-weight: 700;
+  size-adjust: 85%;
+  ascent-override: 120%;
   font-display: swap;
 }