From 8b28694c3178b4148d2b1d7cc4495fcb74bd28c3 Mon Sep 17 00:00:00 2001 From: Sodbileg Gansukh Date: Thu, 10 Oct 2024 17:49:52 +0100 Subject: [PATCH] Added font-size-adjust option - this allows us to fine-tune the font size for specific fonts --- ghost/custom-fonts/src/index.ts | 46 +++++++++++++++++---------- ghost/custom-fonts/test/index.test.ts | 10 +++--- 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/ghost/custom-fonts/src/index.ts b/ghost/custom-fonts/src/index.ts index c7d172c12f..530d3c19a3 100644 --- a/ghost/custom-fonts/src/index.ts +++ b/ghost/custom-fonts/src/index.ts @@ -14,46 +14,60 @@ export function generateCustomFontCss(fonts: FontSelection) { const importStrings = { 'Space Grotesk': { - url: '@import url(https://fonts.bunny.net/css?family=space-grotesk:700)' + url: '@import url(https://fonts.bunny.net/css?family=space-grotesk:700)', + adjust: 'none' }, 'Playfair Display': { - url: '@import url(https://fonts.bunny.net/css?family=playfair-display:400)' + url: '@import url(https://fonts.bunny.net/css?family=playfair-display:400)', + adjust: 'none' }, 'Chakra Petch': { - url: '@import url(https://fonts.bunny.net/css?family=chakra-petch:400)' + url: '@import url(https://fonts.bunny.net/css?family=chakra-petch:400)', + adjust: 'none' }, 'Noto Sans': { - url: '@import url(https://fonts.bunny.net/css?family=noto-sans:400,700)' + url: '@import url(https://fonts.bunny.net/css?family=noto-sans:400,700)', + adjust: 'none' }, Poppins: { - url: '@import url(https://fonts.bunny.net/css?family=poppins:400,500,600)' + url: '@import url(https://fonts.bunny.net/css?family=poppins:400,500,600)', + adjust: 'none' }, 'Fira Sans': { - url: '@import url(https://fonts.bunny.net/css?family=fira-sans:400,500,600)' + url: '@import url(https://fonts.bunny.net/css?family=fira-sans:400,500,600)', + adjust: 'none' }, Inter: { - url: '@import url(https://fonts.bunny.net/css?family=inter:400,500,600)' + url: '@import url(https://fonts.bunny.net/css?family=inter:400,500,600)', + adjust: 'none' }, 'Noto Serif': { - url: '@import url(https://fonts.bunny.net/css?family=noto-serif:400,700)' + url: '@import url(https://fonts.bunny.net/css?family=noto-serif:400,700)', + adjust: 'none' }, Lora: { - url: '@import url(https://fonts.bunny.net/css?family=lora:400,700)' + url: '@import url(https://fonts.bunny.net/css?family=lora:400,700)', + adjust: 'none' }, 'IBM Plex Serif': { - url: '@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,500,600)' + url: '@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,500,600)', + adjust: 'none' }, 'EB Garamond': { - url: '@import url(https://fonts.bunny.net/css?family=eb-garamond:400,700)' + url: '@import url(https://fonts.bunny.net/css?family=eb-garamond:400,700)', + adjust: 0.45 }, 'Space Mono': { - url: '@import url(https://fonts.bunny.net/css?family=space-mono:400,700)' + url: '@import url(https://fonts.bunny.net/css?family=space-mono:400,700)', + adjust: 'none' }, 'Fira Mono': { - url: '@import url(https://fonts.bunny.net/css?family=fira-mono:400,700)' + url: '@import url(https://fonts.bunny.net/css?family=fira-mono:400,700)', + adjust: 'none' }, 'JetBrains Mono': { - url: '@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700)' + url: '@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700)', + adjust: 'none' } }; @@ -72,11 +86,11 @@ export function generateCustomFontCss(fonts: FontSelection) { } if (fonts?.body) { - bodyFontCSS = `.gh-body-font {font-family: ${fonts.body};}`; + bodyFontCSS = `.gh-body-font {font-family: ${fonts.body}; font-size-adjust: ${importStrings[fonts.body].adjust};}`; } if (fonts?.heading) { - headingFontCSS = `.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: ${fonts.heading};}`; + headingFontCSS = `.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: ${fonts.heading}; font-size-adjust: ${importStrings[fonts.heading].adjust};}`; } return ``; diff --git a/ghost/custom-fonts/test/index.test.ts b/ghost/custom-fonts/test/index.test.ts index 7eba54e138..a05f356fe5 100644 --- a/ghost/custom-fonts/test/index.test.ts +++ b/ghost/custom-fonts/test/index.test.ts @@ -37,7 +37,7 @@ describe('Custom Fonts', function () { const result = customFonts.generateCustomFontCss({body: 'Noto Sans'}); assert.equal(result.includes('@import url(https://fonts.bunny.net/css?family=noto-sans:400,700);'), true, 'Includes the correct import for the body font'); - assert.equal(result.includes('.gh-body-font {font-family: Noto Sans;}'), true, 'Includes the correct CSS for the body font'); + assert.equal(result.includes('.gh-body-font {font-family: Noto Sans; font-size-adjust: none;}'), true, 'Includes the correct CSS for the body font'); assert.equal(result.includes('.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id]'), false, 'Does not include CSS for the title font'); }); @@ -45,15 +45,15 @@ describe('Custom Fonts', function () { const result = customFonts.generateCustomFontCss({heading: 'Playfair Display', body: 'Poppins'}); assert.equal(result.includes('@import url(https://fonts.bunny.net/css?family=playfair-display:400);'), true, 'Includes the correct import for the heading font'); - assert.equal(result.includes('@import url(https://fonts.bunny.net/css?family=poppins:400,700);'), true, 'Includes the correct import for the body font'); - assert.equal(result.includes('.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: Playfair Display;}'), true, 'Includes the correct CSS for the heading font'); - assert.equal(result.includes('.gh-body-font {font-family: Poppins;}'), true, 'Includes the correct CSS for the body font'); + assert.equal(result.includes('@import url(https://fonts.bunny.net/css?family=poppins:400,500,600);'), true, 'Includes the correct import for the body font'); + assert.equal(result.includes('.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: Playfair Display; font-size-adjust: none;}'), true, 'Includes the correct CSS for the heading font'); + assert.equal(result.includes('.gh-body-font {font-family: Poppins; font-size-adjust: none;}'), true, 'Includes the correct CSS for the body font'); }); it('returns correct CSS with only one import for equal heading and body fonts', function () { const result = customFonts.generateCustomFontCss({heading: 'Lora', body: 'Lora'}); - assert.equal(result, '', 'Includes the correct CSS with only one import for equal heading and body fonts'); + assert.equal(result, '', 'Includes the correct CSS with only one import for equal heading and body fonts'); }); }); });