RaspberryPiFoundation · patch0 · Nov 3, 2025 · Oct 22, 2025 · Oct 22, 2025 · Oct 22, 2025
diff --git 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
 

diff --git a/src/assets/stylesheets/App.scss b/src/assets/stylesheets/App.scss
@@ -21,9 +21,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(--wc-font-family-sans-serif);
 }
 
 .--light {
@@ -60,9 +58,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(--wc-font-family-sans-serif);
   @include font-size-1(regular);
 }
 

diff --git 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(--wc-font-family-monospace);
 
           &-timer {
             margin-block-start: 0;

diff --git 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(--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
@@ -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,10 +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);
+
 
       .cm-content {
         flex: 1;

diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
@@ -3,23 +3,25 @@
 @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 typography.style-1();
+  }
+
   a {
     color: var(--editor-color-theme-secondary);
   }
 
   strong {
-    font-weight: $font-weight-bold;
+    font-weight: var(--font-weight-bold);
   }
 
   img {
@@ -48,6 +50,8 @@
   }
 
   pre {
+    @include typography.style-1();
+
     background-color: $rpf-grey-700;
     border: 1px solid $rpf-grey-600;
     border-radius: 8px;
@@ -76,7 +80,7 @@
   }
 
   .c-code-filename {
-    font-family: monospace;
+    font-family: var(--wc-font-family-monospace);
     margin: 0;
     padding: $space-0-5 $space-1;
     color: $rpf-white;
@@ -239,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;
     }
@@ -279,10 +284,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
@@ -43,15 +43,21 @@
 @use "./FilePanel" as *; // needs to be below Button
 @use "./EmbeddedViewer" as *;
 
+@use "./settings/fonts" as fonts;
+
 :host {
   font-size: 1.6rem;
 }
 
 #wc {
+  // 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: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: var(--wc-font-family-sans-serif);
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -83,8 +89,7 @@
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  font-family: var(--wc-font-family-monospace);
 }
 
 button {

diff --git 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
@@ -0,0 +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;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +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;
Copy link Contributor loiswells97 Oct 27, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. My only concern with this is that it might change the fonts we're using in places like within codemirror, as we were using different monospace fonts in different places - maybe that's okay though? Copy link Contributor patch0 Nov 3, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. This does indeed change the fonts within codemirror and other places to a standard set. I'm not sure we necessarily need all these fonts to fall back through. It does mean we have a consistent treatment of fonts through the interface now. They can also be customised by the new CSS variables so that in individual applications (e.g. code club projects) a different font could be used. Copy link Contributor patch0 Nov 3, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. I'll try and sort out some screenshots of the codemirror change in the projects site UI