Skip to content

Commit 3ddb8e4

Browse files
minimaluminiumminimaluminium
authored
Switched from @import to <link> for loading custom fonts (#21425)
ref DES-911
1 parent d1a72cf commit 3ddb8e4

File tree

2 files changed

+36
-32
lines changed

2 files changed

+36
-32
lines changed

‎packages/custom-fonts/src/index.ts

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -79,81 +79,85 @@ export function generateCustomFontCss(fonts: FontSelection) {
7979

8080
const importStrings = {
8181
Cardo: {
82-
url: '@import url(https://fonts.bunny.net/css?family=cardo:400,700)'
82+
family: 'cardo:400,700'
8383
},
8484
Manrope: {
85-
url: '@import url(https://fonts.bunny.net/css?family=manrope:300,500,700)'
85+
family: 'manrope:300,500,700'
8686
},
8787
Merriweather: {
88-
url: '@import url(https://fonts.bunny.net/css?family=merriweather:300,700)'
88+
family: 'merriweather:300,700'
8989
},
9090
Nunito: {
91-
url: '@import url(https://fonts.bunny.net/css?family=nunito:400,600,700)'
91+
family: 'nunito:400,600,700'
9292
},
9393
'Old Standard TT': {
94-
url: '@import url(https://fonts.bunny.net/css?family=old-standard-tt:400,700)'
94+
family: 'old-standard-tt:400,700'
9595
},
9696
Prata: {
97-
url: '@import url(https://fonts.bunny.net/css?family=prata:400)'
97+
family: 'prata:400'
9898
},
9999
Roboto: {
100-
url: '@import url(https://fonts.bunny.net/css?family=roboto:400,500,700)'
100+
family: 'roboto:400,500,700'
101101
},
102102
Rufina: {
103-
url: '@import url(https://fonts.bunny.net/css?family=rufina:400,500,700)'
103+
family: 'rufina:400,500,700'
104104
},
105105
'Tenor Sans': {
106-
url: '@import url(https://fonts.bunny.net/css?family=tenor-sans:400)'
106+
family: 'tenor-sans:400'
107107
},
108108
'Space Grotesk': {
109-
url: '@import url(https://fonts.bunny.net/css?family=space-grotesk:700)'
109+
family: 'space-grotesk:700'
110110
},
111111
'Chakra Petch': {
112-
url: '@import url(https://fonts.bunny.net/css?family=chakra-petch:400)'
112+
family: 'chakra-petch:400'
113113
},
114114
'Noto Sans': {
115-
url: '@import url(https://fonts.bunny.net/css?family=noto-sans:400,700)'
115+
family: 'noto-sans:400,700'
116116
},
117117
Poppins: {
118-
url: '@import url(https://fonts.bunny.net/css?family=poppins:400,500,600)'
118+
family: 'poppins:400,500,600'
119119
},
120120
'Fira Sans': {
121-
url: '@import url(https://fonts.bunny.net/css?family=fira-sans:400,500,600)'
121+
family: 'fira-sans:400,500,600'
122122
},
123123
Inter: {
124-
url: '@import url(https://fonts.bunny.net/css?family=inter:400,500,600)'
124+
family: 'inter:400,500,600'
125125
},
126126
'Noto Serif': {
127-
url: '@import url(https://fonts.bunny.net/css?family=noto-serif:400,700)'
127+
family: 'noto-serif:400,700'
128128
},
129129
Lora: {
130-
url: '@import url(https://fonts.bunny.net/css?family=lora:400,700)'
130+
family: 'lora:400,700'
131131
},
132132
'IBM Plex Serif': {
133-
url: '@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,500,600)'
133+
family: 'ibm-plex-serif:400,500,600'
134134
},
135135
'Space Mono': {
136-
url: '@import url(https://fonts.bunny.net/css?family=space-mono:400,700)'
136+
family: 'space-mono:400,700'
137137
},
138138
'Fira Mono': {
139-
url: '@import url(https://fonts.bunny.net/css?family=fira-mono:400,700)'
139+
family: 'fira-mono:400,700'
140140
},
141141
'JetBrains Mono': {
142-
url: '@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700)'
142+
family: 'jetbrains-mono:400,700'
143143
}
144144
};
145145

146146
if (fonts?.heading && fonts?.body && fonts?.heading === fonts?.body) {
147-
fontImports = `${importStrings[fonts?.heading]?.url};`;
147+
fontImports = `<link rel="stylesheet" href="https://fonts.bunny.net/css?family=${importStrings[fonts?.heading]?.family}">`;
148148
} else {
149149
fontImports = '';
150150

151-
if (fonts?.heading) {
152-
fontImports += `${importStrings[fonts?.heading]?.url};`;
153-
}
151+
if (fonts?.heading && fonts?.body) {
152+
fontImports += `<link rel="stylesheet" href="https://fonts.bunny.net/css?family=${importStrings[fonts?.heading]?.family}|${importStrings[fonts?.body]?.family}">`;
153+
} else {
154+
if (fonts?.heading) {
155+
fontImports += `<link rel="stylesheet" href="https://fonts.bunny.net/css?family=${importStrings[fonts?.heading]?.family}">`;
156+
}
154157

155-
if (fonts?.body) {
156-
fontImports += `${importStrings[fonts?.body]?.url};`;
158+
if (fonts?.body) {
159+
fontImports += `<link rel="stylesheet" href="https://fonts.bunny.net/css?family=${importStrings[fonts?.body]?.family}">`;
160+
}
157161
}
158162
}
159163

@@ -171,7 +175,7 @@ export function generateCustomFontCss(fonts: FontSelection) {
171175
fontCSS += '}';
172176
}
173177

174-
return `<style>${fontImports}${fontCSS}</style>`;
178+
return `<link rel="preconnect" href="https://fonts.bunny.net">${fontImports}<style>${fontCSS}</style>`;
175179
}
176180

177181
export function generateCustomFontBodyClass(fonts: FontSelection) {

‎packages/custom-fonts/test/index.test.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,23 +64,23 @@ describe('Custom Fonts', function () {
6464
it('returns correct CSS for single font', function () {
6565
const result = customFonts.generateCustomFontCss({body: 'Noto Sans'});
6666

67-
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');
67+
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');
6868
assert.equal(result.includes(':root {--gh-font-body: Noto Sans;}'), true, 'Includes the correct CSS for the body font');
6969
assert.equal(result.includes('--gh-font-heading'), false, 'Does not include CSS for the title font');
7070
});
7171

7272
it('returns correct CSS for different heading and body fonts', function () {
7373
const result = customFonts.generateCustomFontCss({heading: 'Chakra Petch', body: 'Poppins'});
7474

75-
assert.equal(result.includes('@import url(https://fonts.bunny.net/css?family=chakra-petch:400);'), true, 'Includes the correct import for the heading font');
76-
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');
75+
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');
7776
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');
7877
});
7978

8079
it('returns correct CSS with only one import for equal heading and body fonts', function () {
8180
const result = customFonts.generateCustomFontCss({heading: 'Lora', body: 'Lora'});
8281

83-
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');
82+
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');
83+
assert.equal(result.includes(':root {--gh-font-heading: Lora;--gh-font-body: Lora;}'), true, 'Includes the correct CSS for the body and heading fonts');
8484
});
8585

8686
it('generates CSS when only body font is provided', function () {

0 commit comments

Comments
 (0)