diff --git a/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap b/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap
index 75b8c5e982..b1b873911a 100644
--- a/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap
+++ b/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap
@@ -1178,7 +1178,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);.gh-body-font {font-family: Poppins; font-size-adjust: none;}.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: Space Grotesk; font-size-adjust: none;}</style>",
+    <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 {--ghost-font-heading: Space Grotesk;--ghost-font-body: Poppins;}</style>",
 }
 `;
 
@@ -1253,7 +1253,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=playfair-display:400);@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: Playfair Display; font-size-adjust: none;}</style>",
+    <style>@import url(https://fonts.bunny.net/css?family=playfair-display:400);@import url(https://fonts.bunny.net/css?family=lora:400,700);:root {--ghost-font-heading: Playfair Display;--ghost-font-body: Lora;}</style>",
 }
 `;
 
diff --git a/ghost/custom-fonts/src/index.ts b/ghost/custom-fonts/src/index.ts
index 4ed31c2936..7654673ed6 100644
--- a/ghost/custom-fonts/src/index.ts
+++ b/ghost/custom-fonts/src/index.ts
@@ -9,65 +9,50 @@ export type FontSelection = {
 
 export function generateCustomFontCss(fonts: FontSelection) {
     let fontImports: string = '';
-    let bodyFontCSS: string = '';
-    let headingFontCSS: string = '';
+    let fontCSS: string = '';
 
     const importStrings = {
         'Space Grotesk': {
-            url: '@import url(https://fonts.bunny.net/css?family=space-grotesk:700)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=space-grotesk:700)'
         },
         'Playfair Display': {
-            url: '@import url(https://fonts.bunny.net/css?family=playfair-display:400)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=playfair-display:400)'
         },
         'Chakra Petch': {
-            url: '@import url(https://fonts.bunny.net/css?family=chakra-petch:400)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=chakra-petch:400)'
         },
         'Noto Sans': {
-            url: '@import url(https://fonts.bunny.net/css?family=noto-sans:400,700)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=noto-sans:400,700)'
         },
         Poppins: {
-            url: '@import url(https://fonts.bunny.net/css?family=poppins:400,500,600)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=poppins:400,500,600)'
         },
         'Fira Sans': {
-            url: '@import url(https://fonts.bunny.net/css?family=fira-sans:400,500,600)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=fira-sans:400,500,600)'
         },
         Inter: {
-            url: '@import url(https://fonts.bunny.net/css?family=inter:400,500,600)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=inter:400,500,600)'
         },
         'Noto Serif': {
-            url: '@import url(https://fonts.bunny.net/css?family=noto-serif:400,700)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=noto-serif:400,700)'
         },
         Lora: {
-            url: '@import url(https://fonts.bunny.net/css?family=lora:400,700)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=lora:400,700)'
         },
         'IBM Plex Serif': {
-            url: '@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,500,600)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,500,600)'
         },
         'EB Garamond': {
-            url: '@import url(https://fonts.bunny.net/css?family=eb-garamond:400,700)',
-            adjust: 0.45
+            url: '@import url(https://fonts.bunny.net/css?family=eb-garamond:400,700)'
         },
         'Space Mono': {
-            url: '@import url(https://fonts.bunny.net/css?family=space-mono:400,700)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=space-mono:400,700)'
         },
         'Fira Mono': {
-            url: '@import url(https://fonts.bunny.net/css?family=fira-mono:400,700)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=fira-mono:400,700)'
         },
         'JetBrains Mono': {
-            url: '@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700)',
-            adjust: 'none'
+            url: '@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700)'
         }
     };
 
@@ -85,15 +70,21 @@ export function generateCustomFontCss(fonts: FontSelection) {
         }
     }
 
-    if (fonts?.body) {
-        bodyFontCSS = `.gh-body-font {font-family: ${fonts.body}; font-size-adjust: ${importStrings[fonts.body].adjust};}`;
+    if (fonts?.body || fonts?.heading) {
+        fontCSS = ':root {';
+
+        if (fonts?.heading) {
+            fontCSS += `--ghost-font-heading: ${fonts.heading};`;
+        }
+
+        if (fonts?.body) {
+            fontCSS += `--ghost-font-body: ${fonts.body};`;
+        }
+
+        fontCSS += '}';
     }
 
-    if (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>`;
+    return `<style>${fontImports}${fontCSS}</style>`;
 }
 
 export const CUSTOM_FONTS: CustomFonts = {
diff --git a/ghost/custom-fonts/test/index.test.ts b/ghost/custom-fonts/test/index.test.ts
index a05f356fe5..e7f0cb5b7c 100644
--- a/ghost/custom-fonts/test/index.test.ts
+++ b/ghost/custom-fonts/test/index.test.ts
@@ -37,8 +37,8 @@ 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; 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');
+            assert.equal(result.includes(':root {--ghost-font-body: Noto Sans;}'), true, 'Includes the correct CSS for the body font');
+            assert.equal(result.includes('--ghost-font-heading'), false, 'Does not include CSS for the title font');
         });
 
         it('returns correct CSS for different heading and body fonts', function () {
@@ -46,14 +46,13 @@ describe('Custom Fonts', function () {
 
             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,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');
+            assert.equal(result.includes(':root {--ghost-font-heading: Playfair Display;--ghost-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);.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');
+            assert.equal(result, '<style>@import url(https://fonts.bunny.net/css?family=lora:400,700);:root {--ghost-font-heading: Lora;--ghost-font-body: Lora;}</style>', 'Includes the correct CSS with only one import for equal heading and body fonts');
         });
     });
 });