Add more font customization options

2024-02-08 22:13:21 +01:00 · 2024-02-08 22:13:21 +01:00 · 83d91ccd0b
commit 83d91ccd0b
parent 165715c57c
13 changed files with 146 additions and 12 deletions
--- a/INSTALLATION.md
+++ b/INSTALLATION.md
@ -7,7 +7,7 @@ This guide is mainly written for people who never had their own WordPress site b
 * [Choosing a Host](#choosing-a-host)
 * [Installing WordPress](#installing-wordpress)
  * [Configuring WordPress](#configuring-wordpress)
-  * [Securing WordPress](#securing-wordpress)
+  * [Securing WordPress & Browser Caching](#securing-wordpress--browser-caching)
 * [Legal Considerations](#legal-considerations)
 * [How to Install/Update the Fictioneer Theme](#how-to-installupdate-the-fictioneer-theme)
  * [Updating the Theme](#updating-the-theme)
@ -76,7 +76,7 @@ Everything installed? Head to **[Settings](https://wordpress.org/support/article

 * **Author websites:** Technically not a required setting, but authors may want to fill out the website field in their profile. These are added as Open Graph author meta tags used by search engines and social media embeds. If left blank, the generated author page of the site will be used instead, which might be what you want anyway.

-### Securing WordPress
+### Securing WordPress & Browser Caching

 You can greatly improve your site security and performance by adding policies to the **.htaccess** file located in the WordPress root directory. Managed hosting plans normally do this for you. Make a backup and add the following lines anywhere before `# BEGIN WordPress` or after `# END WordPress`. If something goes wrong wrong, just remove everything again or restore the backup. You can also use a (cache) plugin. This is just the basics, far more is possible, but please refer to a proper guide.

@ -1181,6 +1181,32 @@ Fictioneer loads the free version of [Font Awesome 6.4.2](https://fontawesome.co

 ### Custom Fonts

+You can add custom fonts with a child theme, either by uploading a configuration folder to `/themes/your-child-theme/fonts/` or with a CDN like Google Fonts. The latter may cause privacy issues, depending on the legislation in your country. Delivering fonts from your server is legally safer, but can affect performance if you do not [leverage browser caching](#securing-wordpress--browser-caching) or use a cache plugin (which you should).
+
+Following is an explanation of both options on the example of [Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans?noto.query=noto+sans). Noto has also variants for logographic writing systems if you require that. Mind that not all fonts you find on the Internet are free to use.
+
+#### 1A) Upload a font configuration folder
+
+This option requires some preparation, but does not need custom code. Take a look at the [open-sans folder](https://github.com/Tetrakern/fictioneer/tree/main/fonts/open-sans); you will find several font files, one CSS file, and one JSON file.
+
+
+You can easily replicate that
+
+
+
+
+
+Go to the [Google Fonts Webhelper](https://gwfh.mranftl.com/fonts/noto-sans) to prepare the font files and styles. Select the charsets depending on your language requirements, then select the styles you need as with the **1A** approach. Before you copy the CSS (for modern browsers), you may want to customize the folder prefix. `../fonts/` assumes you place the files in `/themes/your-child-theme/fonts/`, but if you add more than one font, subfolders like `../fonts/noto-sans/` will make them easier to manage.
+
+Once done, download the files and upload them to the theme folder you specified. Copy the CSS from the helper site to `/themes/your-child-theme/css/child-fonts.css` (for example, you can change the name as long as you do it everywhere).
+
+
+
+
+
+
+
+
 You can add custom fonts with a child theme, which requires a series of not-quite-easy steps. This is less complicated with the Google Fonts CDN — however, that may be a privacy issue. Legally safe is to deliver the fonts from your server, as the theme does by default. Both options are explained here on the example of [Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans?noto.query=noto+sans), either as extra or primary/secondary font. Noto has also variants for logographic writing systems if you require that. Mind that not all fonts you find on the Internet are free to use.

 #### 1A) Load from the Google Fonts CDN
--- a/css/application.css
+++ b/css/application.css
--- a/css/chapter.css
+++ b/css/chapter.css
--- a/css/complete.css
+++ b/css/complete.css
--- a/css/editor.css
+++ b/css/editor.css
--- a/css/properties.css
+++ b/css/properties.css
--- a/css/story.css
+++ b/css/story.css
--- a/includes/functions/_customizer-settings.php
+++ b/includes/functions/_customizer-settings.php
@ -2915,6 +2915,94 @@ function fictioneer_add_fonts_customizer_settings( $manager ) {
    )
  );

+  // Site title font
+  $manager->add_setting(
+    'site_title_font_family_value',
+    array(
+      'capability' => 'manage_options',
+      'sanitize_callback' => 'sanitize_text_field',
+      'default' => 'Open Sans'
+    )
+  );
+
+  $manager->add_control(
+    'site_title_font_family_value',
+    array(
+      'type' => 'select',
+      'priority' => 10,
+      'section' => 'fictioneer_fonts',
+      'label' => __( 'Site Title Font', 'fictioneer' ),
+      'description' => __( 'Used for the site title. Default "Open Sans".', 'fictioneer' ),
+      'choices'  => $font_options
+    )
+  );
+
+  // Story title font
+  $manager->add_setting(
+    'story_title_font_family_value',
+    array(
+      'capability' => 'manage_options',
+      'sanitize_callback' => 'sanitize_text_field',
+      'default' => 'Open Sans'
+    )
+  );
+
+  $manager->add_control(
+    'story_title_font_family_value',
+    array(
+      'type' => 'select',
+      'priority' => 10,
+      'section' => 'fictioneer_fonts',
+      'label' => __( 'Story Title Font', 'fictioneer' ),
+      'description' => __( 'Used for the title on story pages. Default "Open Sans".', 'fictioneer' ),
+      'choices'  => $font_options
+    )
+  );
+
+  // Chapter title font
+  $manager->add_setting(
+    'chapter_title_font_family_value',
+    array(
+      'capability' => 'manage_options',
+      'sanitize_callback' => 'sanitize_text_field',
+      'default' => 'Open Sans'
+    )
+  );
+
+  $manager->add_control(
+    'chapter_title_font_family_value',
+    array(
+      'type' => 'select',
+      'priority' => 10,
+      'section' => 'fictioneer_fonts',
+      'label' => __( 'Chapter Title Font', 'fictioneer' ),
+      'description' => __( 'Used for the title on chapter pages. Default "Open Sans".', 'fictioneer' ),
+      'choices'  => $font_options
+    )
+  );
+
+  // Chapter list title font
+  $manager->add_setting(
+    'chapter_list_title_font_family_value',
+    array(
+      'capability' => 'manage_options',
+      'sanitize_callback' => 'sanitize_text_field',
+      'default' => 'Open Sans'
+    )
+  );
+
+  $manager->add_control(
+    'chapter_list_title_font_family_value',
+    array(
+      'type' => 'select',
+      'priority' => 10,
+      'section' => 'fictioneer_fonts',
+      'label' => __( 'Chapter List Title Font', 'fictioneer' ),
+      'description' => __( 'Used for the title row in chapter lists. Default "Open Sans".', 'fictioneer' ),
+      'choices'  => $font_options
+    )
+  );
+
  // Dark mode font weight adjustment
  $manager->add_setting(
    'dark_mode_font_weight',
--- a/includes/functions/_customizer.php
+++ b/includes/functions/_customizer.php
@ -533,6 +533,18 @@ if ( ! function_exists( 'fictioneer_add_customized_layout_css' ) ) {
    $font_heading = get_theme_mod( 'heading_font_family_value', 'Open Sans' );
    $font_heading = $font_heading === 'System' ? 'var(--ff-system)' : "'{$font_heading}', var(--ff-base)";

+    $font_site_title = get_theme_mod( 'site_title_font_family_value', 'Open Sans' );
+    $font_site_title = $font_site_title === 'System' ? 'var(--ff-system)' : "'{$font_site_title}', var(--ff-heading)";
+
+    $font_story_title = get_theme_mod( 'story_title_font_family_value', 'Open Sans' );
+    $font_story_title = $font_story_title === 'System' ? 'var(--ff-system)' : "'{$font_story_title}', var(--ff-heading)";
+
+    $font_chapter_title = get_theme_mod( 'chapter_title_font_family_value', 'Open Sans' );
+    $font_chapter_title = $font_chapter_title === 'System' ? 'var(--ff-system)' : "'{$font_chapter_title}', var(--ff-heading)";
+
+    $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)";
+
    // Build CSS
    $layout_css = ":root {
      --site-width: " . $site_width . "px;
@ -548,6 +560,10 @@ if ( ! function_exists( 'fictioneer_add_customized_layout_css' ) ) {
      --ff-base: {$font_primary};
      --ff-note: {$font_secondary};
      --ff-heading: {$font_heading};
+      --ff-site-title: {$font_site_title};
+      --ff-story-title: {$font_story_title};
+      --ff-chapter-title: {$font_chapter_title};
+      --ff-chapter-list-title: {$font_chapter_list_title};
    }";

    if ( get_theme_mod( 'use_custom_layout', false ) ) {
--- a/src/scss/_chapter.scss
+++ b/src/scss/_chapter.scss
@ -121,6 +121,7 @@
    }

    h1 {
+      font-family: var(--ff-chapter-title);
      font-size: get_relative_clamp(1.25, 1.75, 320, $full-width, 'vw', 'em');
      line-height: 1.3;
      margin-top: .25rem;
--- a/src/scss/_header.scss
+++ b/src/scss/_header.scss
@ -39,7 +39,7 @@
    content-visibility: auto;

    &-heading {
-      font: 700 var(--site-title-font-size)/1.3 var(--site-title-font);
+      font: 700 var(--site-title-font-size)/1.3 var(--ff-site-title);
      letter-spacing: 0;

      a {
@ -156,7 +156,7 @@
  }

  &__heading {
-    font: 700 var(--site-title-font-size)/1.3 var(--site-title-font);
+    font: 700 var(--site-title-font-size)/1.3 var(--ff-site-title);
    letter-spacing: 0;

    a {
--- a/src/scss/_story.scss
+++ b/src/scss/_story.scss
@ -174,6 +174,7 @@ $header_breakpoint: 640px;

  &__identity {
    h1 {
+      font-family: var(--ff-story-title);
      font-size: get_clamp(22, 32, 320, $full-width);
      line-height: 1.2;
    }
--- a/src/scss/common/_properties.scss
+++ b/src/scss/common/_properties.scss
@ -34,14 +34,16 @@
  --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-chapter-list-title: var(--ff-base, 'Open Sans');
+  --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);

  // === HEADER ================================================================
  --layout-header-background-height: #{get_clamp(210, 480, 320, $full-width)}; // Overridden by theme customizer
  --layout-site-header-height: calc(#{get_clamp(190, 380, 320, $full-width)} - var(--layout-main-inset-top)); // Overridden by theme customizer
  --layout-site-logo-filter: none;
  --layout-site-logo-height: 210px; // Overridden by theme customizer
-  --site-title-font: var(--ff-heading);
  --site-title-font-size: #{get_clamp(32, 60, 320, $full-width)}; // Overridden by theme customizer
  --site-title-tagline-font-size: #{get_clamp(13, 18, 320, $full-width)}; // Overridden by theme customizer
  --site-title-heading-color: var(--fg-100); // Overridden by theme customizer