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

Added font-size-adjust option

Browse source 
- this allows us to fine-tune the font size for specific fonts
This commit is contained in:
Sodbileg Gansukh 2024-10-10 17:49:52 +01:00 • committed by Aileen Booker
parent a4fde1f44b
commit 8b28694c31
2 changed files with 35 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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 `<style>${fontImports}${bodyFontCSS}${headingFontCSS}</style>`;

10
ghost/custom-fonts/test/index.test.ts
View file

@ -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, '<style>@import url(https://fonts.bunny.net/css?family=lora:400,700);.gh-body-font {font-family: Lora;}.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: Lora;}</style>', 'Includes the correct CSS with only one import for equal heading and body fonts');
assert.equal(result, '<style>@import url(https://fonts.bunny.net/css?family=lora:400,700);.gh-body-font {font-family: Lora; font-size-adjust: none;}.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: Lora; font-size-adjust: none;}</style>', 'Includes the correct CSS with only one import for equal heading and body fonts');
});
});
});