Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Switched from @import to <link> for loading custom fonts (#21425)

Browse source 
ref DES-911
This commit is contained in:
Sodbileg Gansukh 2024-10-28 14:08:16 +08:00 • committed by GitHub
parent 967cf23091
commit 259593d517
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 38 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap
View file

@ -1406,7 +1406,7 @@ Object {
<script defer src=\\"https://cdn.jsdelivr.net/ghost/sodo-search@~[[VERSION]]/umd/sodo-search.min.js\\" data-key=\\"xyz\\" data-styles=\\"https://cdn.jsdelivr.net/ghost/sodo-search@~[[VERSION]]/umd/main.css\\" data-sodo-search=\\"http://127.0.0.1:2369/\\" data-locale=\\"en\\" crossorigin=\\"anonymous\\"></script>
<link href=\\"http://127.0.0.1:2369/webmentions/receive/\\" rel=\\"webmention\\">
<style>@import url(https://fonts.bunny.net/css?family=space-grotesk:700);@import url(https://fonts.bunny.net/css?family=poppins:400,500,600);:root {--gh-font-heading: Space Grotesk;--gh-font-body: Poppins;}</style>",
<link rel=\\"preconnect\\" href=\\"https://fonts.bunny.net\\"><link rel=\\"stylesheet\\" href=\\"https://fonts.bunny.net/css?family=space-grotesk:700|poppins:400,500,600\\"><style>:root {--gh-font-heading: Space Grotesk;--gh-font-body: Poppins;}</style>",
}
`;
@ -1556,7 +1556,7 @@ Object {
<script defer src=\\"https://cdn.jsdelivr.net/ghost/sodo-search@~[[VERSION]]/umd/sodo-search.min.js\\" data-key=\\"xyz\\" data-styles=\\"https://cdn.jsdelivr.net/ghost/sodo-search@~[[VERSION]]/umd/main.css\\" data-sodo-search=\\"http://127.0.0.1:2369/\\" data-locale=\\"en\\" crossorigin=\\"anonymous\\"></script>
<link href=\\"http://127.0.0.1:2369/webmentions/receive/\\" rel=\\"webmention\\">
<style>undefined;@import url(https://fonts.bunny.net/css?family=lora:400,700);:root {--gh-font-heading: Playfair Display;--gh-font-body: Lora;}</style>",
<link rel=\\"preconnect\\" href=\\"https://fonts.bunny.net\\"><link rel=\\"stylesheet\\" href=\\"https://fonts.bunny.net/css?family=undefined|lora:400,700\\"><style>:root {--gh-font-heading: Playfair Display;--gh-font-body: Lora;}</style>",
}
`;

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

@ -79,81 +79,85 @@ export function generateCustomFontCss(fonts: FontSelection) {
const importStrings = {
Cardo: {
url: '@import url(https://fonts.bunny.net/css?family=cardo:400,700)'
family: 'cardo:400,700'
},
Manrope: {
url: '@import url(https://fonts.bunny.net/css?family=manrope:300,500,700)'
family: 'manrope:300,500,700'
},
Merriweather: {
url: '@import url(https://fonts.bunny.net/css?family=merriweather:300,700)'
family: 'merriweather:300,700'
},
Nunito: {
url: '@import url(https://fonts.bunny.net/css?family=nunito:400,600,700)'
family: 'nunito:400,600,700'
},
'Old Standard TT': {
url: '@import url(https://fonts.bunny.net/css?family=old-standard-tt:400,700)'
family: 'old-standard-tt:400,700'
},
Prata: {
url: '@import url(https://fonts.bunny.net/css?family=prata:400)'
family: 'prata:400'
},
Roboto: {
url: '@import url(https://fonts.bunny.net/css?family=roboto:400,500,700)'
family: 'roboto:400,500,700'
},
Rufina: {
url: '@import url(https://fonts.bunny.net/css?family=rufina:400,500,700)'
family: 'rufina:400,500,700'
},
'Tenor Sans': {
url: '@import url(https://fonts.bunny.net/css?family=tenor-sans:400)'
family: 'tenor-sans:400'
},
'Space Grotesk': {
url: '@import url(https://fonts.bunny.net/css?family=space-grotesk:700)'
family: 'space-grotesk:700'
},
'Chakra Petch': {
url: '@import url(https://fonts.bunny.net/css?family=chakra-petch:400)'
family: 'chakra-petch:400'
},
'Noto Sans': {
url: '@import url(https://fonts.bunny.net/css?family=noto-sans:400,700)'
family: 'noto-sans:400,700'
},
Poppins: {
url: '@import url(https://fonts.bunny.net/css?family=poppins:400,500,600)'
family: 'poppins:400,500,600'
},
'Fira Sans': {
url: '@import url(https://fonts.bunny.net/css?family=fira-sans:400,500,600)'
family: 'fira-sans:400,500,600'
},
Inter: {
url: '@import url(https://fonts.bunny.net/css?family=inter:400,500,600)'
family: 'inter:400,500,600'
},
'Noto Serif': {
url: '@import url(https://fonts.bunny.net/css?family=noto-serif:400,700)'
family: 'noto-serif:400,700'
},
Lora: {
url: '@import url(https://fonts.bunny.net/css?family=lora:400,700)'
family: 'lora:400,700'
},
'IBM Plex Serif': {
url: '@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,500,600)'
family: 'ibm-plex-serif:400,500,600'
},
'Space Mono': {
url: '@import url(https://fonts.bunny.net/css?family=space-mono:400,700)'
family: 'space-mono:400,700'
},
'Fira Mono': {
url: '@import url(https://fonts.bunny.net/css?family=fira-mono:400,700)'
family: 'fira-mono:400,700'
},
'JetBrains Mono': {
url: '@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700)'
family: 'jetbrains-mono:400,700'
}
};
if (fonts?.heading && fonts?.body && fonts?.heading === fonts?.body) {
fontImports = `${importStrings[fonts?.heading]?.url};`;
fontImports = `<link rel="stylesheet" href="https://fonts.bunny.net/css?family=${importStrings[fonts?.heading]?.family}">`;
} else {
fontImports = '';
if (fonts?.heading) {
fontImports += `${importStrings[fonts?.heading]?.url};`;
}
if (fonts?.heading && fonts?.body) {
fontImports += `<link rel="stylesheet" href="https://fonts.bunny.net/css?family=${importStrings[fonts?.heading]?.family}|${importStrings[fonts?.body]?.family}">`;
} else {
if (fonts?.heading) {
fontImports += `<link rel="stylesheet" href="https://fonts.bunny.net/css?family=${importStrings[fonts?.heading]?.family}">`;
}
if (fonts?.body) {
fontImports += `${importStrings[fonts?.body]?.url};`;
if (fonts?.body) {
fontImports += `<link rel="stylesheet" href="https://fonts.bunny.net/css?family=${importStrings[fonts?.body]?.family}">`;
}
}
}
@ -171,7 +175,7 @@ export function generateCustomFontCss(fonts: FontSelection) {
fontCSS += '}';
}
return `<style>${fontImports}${fontCSS}</style>`;
return `<link rel="preconnect" href="https://fonts.bunny.net">${fontImports}<style>${fontCSS}</style>`;
}
export function generateCustomFontBodyClass(fonts: FontSelection) {

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

@ -64,7 +64,7 @@ describe('Custom Fonts', function () {
it('returns correct CSS for single font', 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('<link rel="preconnect" href="https://fonts.bunny.net"><link rel="stylesheet" href="https://fonts.bunny.net/css?family=noto-sans:400,700">'), true, 'Includes the correct import for the body font');
assert.equal(result.includes(':root {--gh-font-body: Noto Sans;}'), true, 'Includes the correct CSS for the body font');
assert.equal(result.includes('--gh-font-heading'), false, 'Does not include CSS for the title font');
});
@ -72,15 +72,15 @@ describe('Custom Fonts', function () {
it('returns correct CSS for different heading and body fonts', function () {
const result = customFonts.generateCustomFontCss({heading: 'Chakra Petch', body: 'Poppins'});
assert.equal(result.includes('@import url(https://fonts.bunny.net/css?family=chakra-petch:400);'), true, 'Includes the correct import for the heading 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('<link rel="preconnect" href="https://fonts.bunny.net"><link rel="stylesheet" href="https://fonts.bunny.net/css?family=chakra-petch:400|poppins:400,500,600">'), true, 'Includes the correct import for the heading font');
assert.equal(result.includes(':root {--gh-font-heading: Chakra Petch;--gh-font-body: Poppins;}'), true, 'Includes the correct CSS for the body and heading fonts');
});
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);:root {--gh-font-heading: Lora;--gh-font-body: Lora;}</style>', 'Includes the correct CSS with only one import for equal heading and body fonts');
assert.equal(result.includes('<link rel="preconnect" href="https://fonts.bunny.net"><link rel="stylesheet" href="https://fonts.bunny.net/css?family=lora:400,700">'), true, 'Includes the correct CSS with only one import for equal heading and body fonts');
assert.equal(result.includes(':root {--gh-font-heading: Lora;--gh-font-body: Lora;}'), true, 'Includes the correct CSS for the body and heading fonts');
});
it('generates CSS when only body font is provided', function () {