Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-15 03:01:37 -05:00
Code Issues Activity

Add custom fonts to the body class

Browse source 
Added `gh-font-body-[font-name]` and `gh-font-heading-[font-name]` classes to the body element to allow theme developers custom font styling.
This commit is contained in:
Peter Zimon 2024-10-21 14:44:17 +02:00 • committed by Aileen Booker
parent b0b41e0d86
commit cb462dfb21
2 changed files with 60 additions and 0 deletions
ghost
core/core/frontend/helpers
body_class.js
custom-fonts/src
index.ts

29
ghost/core/core/frontend/helpers/body_class.js
View file

@ -2,8 +2,14 @@
// Usage: `{{body_class}}`
//
// Output classes for the body element
const {labs, settingsCache} = require('../services/proxy');
const {generateCustomFontBodyClass, isValidCustomFont, isValidCustomHeadingFont} = require('@tryghost/custom-fonts');
const {SafeString} = require('../services/handlebars');
/**
* @typedef {import('@tryghost/custom-fonts').FontSelection} FontSelection
*/
// We use the name body_class to match the helper for consistency
module.exports = function body_class(options) { // eslint-disable-line camelcase
let classes = [];
@ -39,6 +45,29 @@ module.exports = function body_class(options) { // eslint-disable-line camelcase
classes.push('paged');
}
if (labs.isSet('customFonts')) {
// 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 = options.data.site.heading_font || settingsCache.get('heading_font');
const bodyFont = options.data.site.body_font || settingsCache.get('body_font');
if ((typeof headingFont === 'string' && isValidCustomHeadingFont(headingFont)) ||
(typeof bodyFont === 'string' && isValidCustomFont(bodyFont))) {
/** @type FontSelection */
const fontSelection = {};
if (headingFont) {
fontSelection.heading = headingFont;
}
if (bodyFont) {
fontSelection.body = bodyFont;
}
const customBodyClasses = generateCustomFontBodyClass(fontSelection);
classes.push(new SafeString(customBodyClasses));
}
}
classes = classes.join(' ').trim();
return new SafeString(classes);

31
ghost/custom-fonts/src/index.ts
View file

@ -87,6 +87,37 @@ export function generateCustomFontCss(fonts: FontSelection) {
return `<style>${fontImports}${fontCSS}</style>`;
}
export function generateCustomFontBodyClass(fonts: FontSelection) {
const classFontNames = {
'Space Grotesk': 'space-grotesk',
'Playfair Display': 'playfair-display',
'Chakra Petch': 'chakra-petch',
'Noto Sans': 'noto-sans',
Poppins: 'poppins',
'Fira Sans': 'fira-sans',
Inter: 'inter',
'Noto Serif': 'noto-serif',
Lora: 'lora',
'IBM Plex Serif': 'ibm-plex-serif',
'EB Garamond': 'eb-garamond',
'Space Mono': 'space-mono',
'Fira Mono': 'fira-mono',
'JetBrains Mono': 'jetbrains-mono'
};
let bodyClass = '';
if (fonts?.heading) {
bodyClass += `gh-font-heading-${classFontNames[fonts.heading]}`;
}
if (fonts?.body) {
bodyClass += `gh-font-body-${classFontNames[fonts.body]}`;
}
return bodyClass;
}
export const CUSTOM_FONTS: CustomFonts = {
heading: [
'Chakra Petch',