From 0158e4eb27f624bb02ab40e88b9a4fe3f41b3b24 Mon Sep 17 00:00:00 2001
From: "create-issue-branch[bot]"
 <53036503+create-issue-branch[bot]@users.noreply.github.com>
Date: Wed, 22 Oct 2025 08:53:20 +0000
Subject: [PATCH 1/8] Create draft PR for #1259


From 74c7d6f673a6d84d8238620c6cd7f3452aa6673b Mon Sep 17 00:00:00 2001
From: Patrick Cherry <patch0@users.noreply.github.com>
Date: Wed, 22 Oct 2025 09:56:18 +0100
Subject: [PATCH 2/8] Update font families to use variable and set line height

---
 src/assets/stylesheets/App.scss             | 10 ++++------
 src/assets/stylesheets/AstroPiModel.scss    |  3 +--
 src/assets/stylesheets/Button.scss          |  2 +-
 src/assets/stylesheets/EditorPanel.scss     |  2 ++
 src/assets/stylesheets/Instructions.scss    |  4 +++-
 src/assets/stylesheets/InternalStyles.scss  | 12 +++++++-----
 src/assets/stylesheets/index.scss           | 16 +++++++++++-----
 src/assets/stylesheets/settings/_fonts.scss |  8 ++++++++
 8 files changed, 37 insertions(+), 20 deletions(-)
 create mode 100644 src/assets/stylesheets/settings/_fonts.scss

diff --git a/src/assets/stylesheets/App.scss b/src/assets/stylesheets/App.scss
index 914b45073..b79018ca2 100644
--- a/src/assets/stylesheets/App.scss
+++ b/src/assets/stylesheets/App.scss
@@ -1,3 +1,5 @@
+@forward './settings/fonts';
+
 @use './rpf_design_system/font-size' as *;
 @use './rpf_design_system/colours' as *;
 
@@ -21,9 +23,7 @@ button {
 }
 
 input {
-  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: var(--font-family-sans-serif);
 }
 
 .--light {
@@ -60,9 +60,7 @@ input {
 #app {
   display: flex;
   flex-flow: column;
-  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: var(--font-family-sans-serif);
   @include font-size-1(regular);
 }
 
diff --git a/src/assets/stylesheets/AstroPiModel.scss b/src/assets/stylesheets/AstroPiModel.scss
index 743e951da..cc33b0b89 100644
--- a/src/assets/stylesheets/AstroPiModel.scss
+++ b/src/assets/stylesheets/AstroPiModel.scss
@@ -99,8 +99,7 @@
           display: flex;
           align-items: center;
           justify-content: center;
-          font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-            monospace;
+          font-family: var(--font-family-monospace);
 
           &-timer {
             margin-block-start: 0;
diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss
index 541ec8fb0..9d1986061 100644
--- a/src/assets/stylesheets/Button.scss
+++ b/src/assets/stylesheets/Button.scss
@@ -10,7 +10,7 @@
   color: inherit;
   cursor: pointer;
   display: inline-flex;
-  font-family: sans-serif;
+  font-family: var(--font-family-sans-serif);
   font-size: inherit;
   font-weight: $font-weight-bold;
   gap: $space-0-5;
diff --git a/src/assets/stylesheets/EditorPanel.scss b/src/assets/stylesheets/EditorPanel.scss
index 7fc64e840..b22ad090c 100644
--- a/src/assets/stylesheets/EditorPanel.scss
+++ b/src/assets/stylesheets/EditorPanel.scss
@@ -29,6 +29,8 @@
       overflow: auto;
       scrollbar-width: thin;
       overscroll-behavior-x: none;
+      font-family: var(--font-family-monospace);
+      line-height: var(--line-height-1-5);
 
       .cm-content {
         flex: 1;
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index 82d7b99bf..b541af7cd 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -5,6 +5,7 @@
 @use "./rpf_design_system/spacing" as *;
 @use "./rpf_design_system/font-size" as *;
 @use "./rpf_design_system/font-weight" as *;
+@forward './settings/fonts';
 
 .project-instructions {
   block-size: 100%;
@@ -64,6 +65,7 @@
     background-color: $rpf-grey-700;
     border-radius: 8px;
     margin: $space-1 0 $space-1-5 0;
+    line-height: var(--line-height-1-5);
 
     pre {
       border: none;
@@ -76,7 +78,7 @@
   }
 
   .c-code-filename {
-    font-family: monospace;
+    font-family: var(--font-family-monospace);
     margin: 0;
     padding: $space-0-5 $space-1;
     color: $rpf-white;
diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index 42167d9b3..1b0e3a2c3 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -43,15 +43,18 @@
 @use "./FilePanel" as *; // needs to be below Button
 @use "./EmbeddedViewer" as *;
 
+@use "./settings/fonts" as fonts;
+
 :host {
   font-size: 1.6rem;
 }
 
 #wc {
+  --font-family-sans-serif: #{fonts.$font-family-sans-serif};
+  --font-family-monospace: #{fonts.$font-family-monospace};
+
   background: var(--editor-secondary-theme, transparent);
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: var(--font-family-sans-serif);
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -83,8 +86,7 @@
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: var(--font-family-monospace);
 }
 
 button {
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 3e7aa6536..9c5900101 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -1,3 +1,4 @@
+@forward "./settings/fonts";
 @use "./rpf_design_system/colours" as *;
 
 html,
@@ -10,22 +11,27 @@ body {
 }
 
 body {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: var(--font-family-sans-serif);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: var(--font-family-monospace);
 }
 
 #app {
   min-block-size: 100dvh;
 }
 
+#wc {
+  font-family: var(--font-family-sans-serif, sans-serif);
+
+  .code {
+    font-family: var(--font-family-monospace, monospace);
+  }
+}
+
 .--light, #wc.--light {
   --editor-color-layer-1: #{$rpf-teal-100};
   --editor-color-layer-2: #{$rpf-black};
diff --git a/src/assets/stylesheets/settings/_fonts.scss b/src/assets/stylesheets/settings/_fonts.scss
new file mode 100644
index 000000000..38f2d49a8
--- /dev/null
+++ b/src/assets/stylesheets/settings/_fonts.scss
@@ -0,0 +1,8 @@
+
+$font-family-sans-serif:  'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+$font-family-monospace: RobotoMono, source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+
+:root, :host {
+  --font-family-sans-serif: $font-family-sans-serif;
+  --font-family-monospace: $font-family-monospace;
+}

From 4633ddff534cb824ab2f93535692de496c158393 Mon Sep 17 00:00:00 2001
From: Patrick Cherry <patch0@users.noreply.github.com>
Date: Fri, 24 Oct 2025 09:11:41 +0100
Subject: [PATCH 3/8] Add `--wc-` prefix to new CSS vars; fix line spacing

---
 src/assets/stylesheets/App.scss            |  4 ++--
 src/assets/stylesheets/AstroPiModel.scss   |  2 +-
 src/assets/stylesheets/Button.scss         |  2 +-
 src/assets/stylesheets/EditorPanel.scss    |  2 +-
 src/assets/stylesheets/Instructions.scss   | 16 +++++++++++-----
 src/assets/stylesheets/InternalStyles.scss | 11 +++++++----
 src/assets/stylesheets/index.scss          | 16 +++++-----------
 7 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/assets/stylesheets/App.scss b/src/assets/stylesheets/App.scss
index b79018ca2..437edce4a 100644
--- a/src/assets/stylesheets/App.scss
+++ b/src/assets/stylesheets/App.scss
@@ -23,7 +23,7 @@ button {
 }
 
 input {
-  font-family: var(--font-family-sans-serif);
+  font-family: var(--wc-font-family-sans-serif);
 }
 
 .--light {
@@ -60,7 +60,7 @@ input {
 #app {
   display: flex;
   flex-flow: column;
-  font-family: var(--font-family-sans-serif);
+  font-family: var(--wc-font-family-sans-serif);
   @include font-size-1(regular);
 }
 
diff --git a/src/assets/stylesheets/AstroPiModel.scss b/src/assets/stylesheets/AstroPiModel.scss
index cc33b0b89..240cd91ee 100644
--- a/src/assets/stylesheets/AstroPiModel.scss
+++ b/src/assets/stylesheets/AstroPiModel.scss
@@ -99,7 +99,7 @@
           display: flex;
           align-items: center;
           justify-content: center;
-          font-family: var(--font-family-monospace);
+          font-family: var(--wc-font-family-monospace);
 
           &-timer {
             margin-block-start: 0;
diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss
index 9d1986061..832cfe328 100644
--- a/src/assets/stylesheets/Button.scss
+++ b/src/assets/stylesheets/Button.scss
@@ -10,7 +10,7 @@
   color: inherit;
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--font-family-sans-serif);
+  font-family: var(--wc-font-family-sans-serif);
   font-size: inherit;
   font-weight: $font-weight-bold;
   gap: $space-0-5;
diff --git a/src/assets/stylesheets/EditorPanel.scss b/src/assets/stylesheets/EditorPanel.scss
index b22ad090c..231a67413 100644
--- a/src/assets/stylesheets/EditorPanel.scss
+++ b/src/assets/stylesheets/EditorPanel.scss
@@ -29,7 +29,7 @@
       overflow: auto;
       scrollbar-width: thin;
       overscroll-behavior-x: none;
-      font-family: var(--font-family-monospace);
+      font-family: var(--wc-font-family-monospace);
       line-height: var(--line-height-1-5);
 
       .cm-content {
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index b541af7cd..aa5197964 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -15,6 +15,10 @@
     margin: 0;
   }
 
+  p {
+    @include font-size-1();
+  }
+
   a {
     color: var(--editor-color-theme-secondary);
   }
@@ -49,6 +53,8 @@
   }
 
   pre {
+    @include font-size-1();
+
     background-color: $rpf-grey-700;
     border: 1px solid $rpf-grey-600;
     border-radius: 8px;
@@ -65,7 +71,6 @@
     background-color: $rpf-grey-700;
     border-radius: 8px;
     margin: $space-1 0 $space-1-5 0;
-    line-height: var(--line-height-1-5);
 
     pre {
       border: none;
@@ -78,7 +83,7 @@
   }
 
   .c-code-filename {
-    font-family: var(--font-family-monospace);
+    font-family: var(--wc-font-family-monospace);
     margin: 0;
     padding: $space-0-5 $space-1;
     color: $rpf-white;
@@ -281,10 +286,11 @@
     margin-block-end: $space-1-5;
 
     pre {
-      padding: 0;
-      margin: 0;
-      inline-size: 100%;
       background-color: $rpf-white;
+      border: none;
+      inline-size: 100%;
+      margin: 0;
+      padding: 0;
     }
 
     code {
diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index 1b0e3a2c3..493e2441d 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -50,11 +50,14 @@
 }
 
 #wc {
-  --font-family-sans-serif: #{fonts.$font-family-sans-serif};
-  --font-family-monospace: #{fonts.$font-family-monospace};
+  // Allow fonts to be overridden by the host application via
+  // --editor-font-family-*, falling back to the default sets in
+  // settings/fonts.scss
+  --wc-font-family-sans-serif: var(--editor-font-family-sans-serif), #{fonts.$font-family-sans-serif};
+  --wc-font-family-monospace: var(--editor-font-family-monospace), #{fonts.$font-family-monospace};
 
   background: var(--editor-secondary-theme, transparent);
-  font-family: var(--font-family-sans-serif);
+  font-family: var(--wc-font-family-sans-serif);
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -86,7 +89,7 @@
 }
 
 code {
-  font-family: var(--font-family-monospace);
+  font-family: var(--wc-font-family-monospace);
 }
 
 button {
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 9c5900101..3e7aa6536 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -1,4 +1,3 @@
-@forward "./settings/fonts";
 @use "./rpf_design_system/colours" as *;
 
 html,
@@ -11,27 +10,22 @@ body {
 }
 
 body {
-  font-family: var(--font-family-sans-serif);
+  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: var(--font-family-monospace);
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
 }
 
 #app {
   min-block-size: 100dvh;
 }
 
-#wc {
-  font-family: var(--font-family-sans-serif, sans-serif);
-
-  .code {
-    font-family: var(--font-family-monospace, monospace);
-  }
-}
-
 .--light, #wc.--light {
   --editor-color-layer-1: #{$rpf-teal-100};
   --editor-color-layer-2: #{$rpf-black};

From 3f41dbd90bee4a4b456e403576d05632e0b752d9 Mon Sep 17 00:00:00 2001
From: Patrick Cherry <patch0@users.noreply.github.com>
Date: Fri, 24 Oct 2025 12:28:12 +0100
Subject: [PATCH 4/8] Tidy

---
 src/assets/stylesheets/InternalStyles.scss  |  4 ++--
 src/assets/stylesheets/index.scss           | 13 ++++++-------
 src/assets/stylesheets/settings/_fonts.scss |  6 ------
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index 493e2441d..abcecdba4 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -53,8 +53,8 @@
   // Allow fonts to be overridden by the host application via
   // --editor-font-family-*, falling back to the default sets in
   // settings/fonts.scss
-  --wc-font-family-sans-serif: var(--editor-font-family-sans-serif), #{fonts.$font-family-sans-serif};
-  --wc-font-family-monospace: var(--editor-font-family-monospace), #{fonts.$font-family-monospace};
+  --wc-font-family-sans-serif: var(--editor-font-family-sans-serif, #{fonts.$font-family-sans-serif});
+  --wc-font-family-monospace: var(--editor-font-family-monospace, #{fonts.$font-family-monospace});
 
   background: var(--editor-secondary-theme, transparent);
   font-family: var(--wc-font-family-sans-serif);
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 3e7aa6536..8cca17a41 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -1,25 +1,24 @@
 @use "./rpf_design_system/colours" as *;
+@use './settings/fonts' as fonts;
 
 html,
 body {
   margin: 0;
 }
 
-:host {
-  font-size: 16px;
+:root {
+  --editor-font-family-sans-serif: fonts.$font-family-sans-serif;
+  --editor-font-family-monospace: fonts.$font-family-monospace;
 }
 
 body {
-  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: var(--editor-font-family-sans-serif);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: var(--editor-font-family-monospace);
 }
 
 #app {
diff --git a/src/assets/stylesheets/settings/_fonts.scss b/src/assets/stylesheets/settings/_fonts.scss
index 38f2d49a8..4464d5b18 100644
--- a/src/assets/stylesheets/settings/_fonts.scss
+++ b/src/assets/stylesheets/settings/_fonts.scss
@@ -1,8 +1,2 @@
-
 $font-family-sans-serif:  'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 $font-family-monospace: RobotoMono, source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-
-:root, :host {
-  --font-family-sans-serif: $font-family-sans-serif;
-  --font-family-monospace: $font-family-monospace;
-}

From 31e77d56cb25a50947de8e803fc22c17b6439a2c Mon Sep 17 00:00:00 2001
From: Patrick Cherry <patch0@users.noreply.github.com>
Date: Fri, 24 Oct 2025 17:00:24 +0100
Subject: [PATCH 5/8] tidy

---
 src/assets/stylesheets/App.scss             | 2 --
 src/assets/stylesheets/Instructions.scss    | 1 -
 src/assets/stylesheets/settings/_fonts.scss | 2 +-
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/assets/stylesheets/App.scss b/src/assets/stylesheets/App.scss
index 437edce4a..6aac2f37d 100644
--- a/src/assets/stylesheets/App.scss
+++ b/src/assets/stylesheets/App.scss
@@ -1,5 +1,3 @@
-@forward './settings/fonts';
-
 @use './rpf_design_system/font-size' as *;
 @use './rpf_design_system/colours' as *;
 
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index aa5197964..10a607a11 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -5,7 +5,6 @@
 @use "./rpf_design_system/spacing" as *;
 @use "./rpf_design_system/font-size" as *;
 @use "./rpf_design_system/font-weight" as *;
-@forward './settings/fonts';
 
 .project-instructions {
   block-size: 100%;
diff --git a/src/assets/stylesheets/settings/_fonts.scss b/src/assets/stylesheets/settings/_fonts.scss
index 4464d5b18..11ef18abc 100644
--- a/src/assets/stylesheets/settings/_fonts.scss
+++ b/src/assets/stylesheets/settings/_fonts.scss
@@ -1,2 +1,2 @@
-$font-family-sans-serif:  'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+$font-family-sans-serif:  Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
 $font-family-monospace: RobotoMono, source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;

From 31a2a76a40849e40c1843aff6c1f066200238b30 Mon Sep 17 00:00:00 2001
From: Patrick Cherry <patch0@users.noreply.github.com>
Date: Fri, 24 Oct 2025 17:07:28 +0100
Subject: [PATCH 6/8] Use typography mixin for the editor panel

---
 src/assets/stylesheets/EditorPanel.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/assets/stylesheets/EditorPanel.scss b/src/assets/stylesheets/EditorPanel.scss
index 231a67413..aff0aa5e1 100644
--- a/src/assets/stylesheets/EditorPanel.scss
+++ b/src/assets/stylesheets/EditorPanel.scss
@@ -1,5 +1,6 @@
 @use "./rpf_design_system/spacing" as *;
 @use "./rpf_design_system/font-size" as *;
+@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/mixins/typography";
 
 // Scrollbar-width is needed from scrollbar to show in Chrome
 .editor-wrapper {
@@ -25,12 +26,14 @@
     }
 
     .cm-scroller {
+      @include typography.style-1();
+
       // Needed here for horizontal scroll
       overflow: auto;
       scrollbar-width: thin;
       overscroll-behavior-x: none;
       font-family: var(--wc-font-family-monospace);
-      line-height: var(--line-height-1-5);
+
 
       .cm-content {
         flex: 1;

From c62121da12351fcd81df38e546bcc9b9f5f87761 Mon Sep 17 00:00:00 2001
From: Patrick Cherry <patch0@users.noreply.github.com>
Date: Fri, 24 Oct 2025 17:16:52 +0100
Subject: [PATCH 7/8] Replace old design system font sizes with new

---
 src/assets/stylesheets/Instructions.scss | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index 10a607a11..0f8ce8ad4 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -3,19 +3,17 @@
 @use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/mixins/typography";
 @use "./rpf_design_system/colours" as *;
 @use "./rpf_design_system/spacing" as *;
-@use "./rpf_design_system/font-size" as *;
-@use "./rpf_design_system/font-weight" as *;
 
 .project-instructions {
   block-size: 100%;
 
   h2 {
-    @include font-size-1-25(bold);
+    @include typography.style-1-5(bold);
     margin: 0;
   }
 
   p {
-    @include font-size-1();
+    @include typography.style-1();
   }
 
   a {
@@ -23,7 +21,7 @@
   }
 
   strong {
-    font-weight: $font-weight-bold;
+    font-weight: var(--font-weight-bold);
   }
 
   img {
@@ -52,7 +50,7 @@
   }
 
   pre {
-    @include font-size-1();
+    @include typography.style-1();
 
     background-color: $rpf-grey-700;
     border: 1px solid $rpf-grey-600;
@@ -245,9 +243,10 @@
     margin: $space-1-5 0;
 
     h3 {
+      @include typography.style-1(bold);
+
       margin: 0;
       padding-inline-start: $space-2;
-      @include font-size-1(bold);
       background-repeat: no-repeat;
       background-position: inline-start $space-0-5 center;
     }

From 57f18cf8118a8bdac0b81ff99094de389e0f143c Mon Sep 17 00:00:00 2001
From: Patrick Cherry <patch0@users.noreply.github.com>
Date: Fri, 24 Oct 2025 18:33:48 +0100
Subject: [PATCH 8/8] Update changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 37a58a2ec..e2bb599c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Added
+
+- Font-family variables that can be used to customise the sans-serif and monospace fonts used in the editor (#1264)
+
 ### Changed
 
 - Changed the horizontal scrollbar to show without needing to scroll to the bottom of the editor window (#1257)
@@ -14,6 +18,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Styling design system components used in the web component (#1263)
 - Sidebar panel overflow for plugins (#1266)
+- Extra border around code output in the instructions panel (#1253)
+- Line numbering alignment in code blocks in the instructions panel (#1259)
 
 ## [0.33.0] - 2025-10-15