✨Added custom font support for themes (#21817)

ref [DES-949](https://linear.app/tryghost/issue/DES-949/

177e604501

This adds custom fonts feature allowing users to select heading and body
fonts for their themes from a curated list. This allows publishers to
have more control over their brand, and allows themes to have a wider
range of styles to appeal to different audiences.

Without custom fonts support, themes will continue to work as normal,
but users won't be able to customize their typography. As for the
official themes, all of them will support custom fonts.

apps/admin-x-settings/src/components/settings/advanced/labs/BetaFeatures.tsx

@@ -27,10 +27,6 @@ const BetaFeatures: React.FC = () => {
                 action={<FeatureToggle flag='i18n' />}
                 detail={<>Translate your membership flows into your publication language (<a className='text-green' href="https://github.com/TryGhost/Ghost/tree/main/ghost/i18n/locales" rel="noopener noreferrer" target="_blank">supported languages</a>). Don’t see yours? <a className='text-green' href="https://forum.ghost.org/t/help-translate-ghost-beta/37461" rel="noopener noreferrer" target="_blank">Get involved</a></>}
                 title='Portal translation' />
-            <LabItem
-                action={<FeatureToggle flag='customFonts' />}
-                detail={<>Enable new custom font settings. <a className='text-green' href="https://ghost.org/docs/themes/custom-settings/#setting-up-support-for-custom-fonts" rel="noopener noreferrer" target="_blank">Learn more &rarr;</a></>}
-                title='Custom fonts' />
             <LabItem
                 action={<div className='flex flex-col items-end gap-1'>
                     <FileUpload

ghost/core/core/frontend/helpers/body_class.js

@@ -48,12 +48,12 @@ module.exports = function body_class(options) { // eslint-disable-line camelcase
     if (labs.isSet('customFonts')) {
         // Check if if the request is for a site preview, in which case we **always** use the custom font values
         // from the passed in data, even when they're empty strings or settings cache has values.
-        const isSitePreview = options.data.site._preview;
+        const isSitePreview = options.data?.site?._preview ?? false;
         // Taking the fonts straight from the passed in data, as they can't be used from the
         // settings cache for the theme preview until the settings are saved. Once saved,
         // we need to use the settings cache to provide the correct CSS injection.
-        const headingFont = isSitePreview ? options.data.site.heading_font : settingsCache.get('heading_font');
-        const bodyFont = isSitePreview ? options.data.site.body_font : settingsCache.get('body_font');
+        const headingFont = isSitePreview ? options.data?.site?.heading_font : settingsCache.get('heading_font');
+        const bodyFont = isSitePreview ? options.data?.site?.body_font : settingsCache.get('body_font');
 
         if ((typeof headingFont === 'string' && isValidCustomHeadingFont(headingFont)) ||
             (typeof bodyFont === 'string' && isValidCustomFont(bodyFont))) {

ghost/core/core/shared/labs.js

@@ -20,7 +20,8 @@ const GA_FEATURES = [
     'themeErrorsNotification',
     'outboundLinkTagging',
     'announcementBar',
-    'newEmailAddresses'
+    'newEmailAddresses',
+    'customFonts'
 ];
 
 // NOTE: this allowlist is meant to be used to filter out any unexpected
@@ -32,7 +33,6 @@ const BETA_FEATURES = [
     'editorExcerpt',
     'ActivityPub',
     'importMemberTier',
-    'customFonts',
     'staff2fa',
     'contentVisibility'
 ];

ghost/core/package.json

@@ -193,7 +193,7 @@
     "ghost-storage-base": "1.0.0",
     "glob": "8.1.0",
     "got": "11.8.6",
-    "gscan": "4.45.0",
+    "gscan": "4.46.0",
     "human-number": "2.0.4",
     "image-size": "1.1.1",
     "intl": "1.2.5",

ghost/core/test/e2e-api/admin/__snapshots__/settings.test.js.snap

@@ -1155,7 +1155,7 @@ exports[`Settings API Edit Can edit a setting 2: [headers] 1`] = `
 Object {
   "access-control-allow-origin": "http://127.0.0.1:2369",
   "cache-control": "no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0",
-  "content-length": "4445",
+  "content-length": "4466",
   "content-type": "application/json; charset=utf-8",
   "content-version": StringMatching /v\\\\d\\+\\\\\\.\\\\d\\+/,
   "etag": StringMatching /\\(\\?:W\\\\/\\)\\?"\\(\\?:\\[ !#-\\\\x7E\\\\x80-\\\\xFF\\]\\*\\|\\\\r\\\\n\\[\\\\t \\]\\|\\\\\\\\\\.\\)\\*"/,

ghost/core/test/unit/frontend/helpers/body_class.test.js

@@ -31,7 +31,8 @@ describe('{{body_class}} helper', function () {
                     context: [],
                     settings: {active_theme: 'casper'}
                 }
-            }
+            },
+            site: {}
         };
     });
 

yarn.lock

@@ -18804,10 +18804,10 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==
 
-gscan@4.45.0:
-  version "4.45.0"
-  resolved "https://registry.yarnpkg.com/gscan/-/gscan-4.45.0.tgz#8f033793b80ac65b64d666aac0891287c1e74909"
-  integrity sha512-d7yu7eGJSv7Xrd8lcBr7Bq76xeKe/LYkrRsRgE8vPRlmHxLPx7AlFb585vbS1Q64cQGwQhlAGusIeKesrfOa6w==
+gscan@4.46.0:
+  version "4.46.0"
+  resolved "https://registry.yarnpkg.com/gscan/-/gscan-4.46.0.tgz#682e5388061e35518e0906ca1285734347cbbe60"
+  integrity sha512-SHsvld0EbVW7X9aHqL6P2CG31yjvrX1IxrVePZTm4yKxH7jjD1QmSmL1Ol3sFAh5MRqtGBuj9mGfDC1nJI0e7w==
   dependencies:
     "@sentry/node" "^7.73.0"
     "@tryghost/config" "^0.2.18"