Normalise monospace fonts (#1652)

LonMcGregor · web-flow · commit 27d3518c5d74 · 2025-11-12T13:26:02.000Z
diff --git a/common-content/en/module/js3/fetch-films/filterFilms.html b/common-content/en/module/js3/fetch-films/filterFilms.html
@@ -10,7 +10,7 @@
         --gap: 1ch;
       }
       body {
-        font-family: Monaco, monospace;
+        font-family: "Monaco", "Menlo", monospace;
         background: linear-gradient(var(--paper), var(--paper-light)) no-repeat;
         min-height: 100vh;
         padding: 5rem 3rem;
diff --git a/common-docs/assets/custom-theme/02-variables/fonts.scss b/common-docs/assets/custom-theme/02-variables/fonts.scss
diff --git a/common-docs/go.mod b/common-docs/go.mod
@@ -6,8 +6,8 @@ require (
 	github.com/CodeYourFuture/CYF-PD v1.0.1-0.20240721130916-d70fc853a278 // indirect
 	github.com/CodeYourFuture/CYF-Projects/micro-front-end v0.0.0-20240817190624-149d97c26abe // indirect
 	github.com/CodeYourFuture/CYF-Workshops/micro-front-end v0.0.0-20240802103453-e77217be1596 // indirect
-	github.com/CodeYourFuture/curriculum/common-content v0.0.0-20240818070728-e8702788f7cb // indirect
-	github.com/CodeYourFuture/curriculum/common-theme v0.0.0-20240818070728-e8702788f7cb // indirect
+	github.com/CodeYourFuture/curriculum/common-content v0.0.0-20241008095008-281a5517463f // indirect
+	github.com/CodeYourFuture/curriculum/common-theme v0.0.0-20241008095008-281a5517463f // indirect
 	github.com/CodeYourFuture/curriculum/org-cyf-guides v0.0.0-20240730234110-686ee61f166f // indirect
 )
 
diff --git a/common-docs/hugo.toml b/common-docs/hugo.toml
@@ -44,7 +44,7 @@ title = "The longed for documentation"
         url = "https://codeyourfuture.io/donate"    
 
 [params]
-googleFonts="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Oswald:wght@400;700&display=swap"
+googleFonts="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"
 description = "A free and open source technical curriculum platform."
 main_website = "https://curriculum.codeyourfuture.io/"
 main_org_name = "Code Your Future"
@@ -79,4 +79,4 @@ theme = "common-theme"
 # because of this 'unexpected behaviour' https://gohugo.io/methods/page/nextinsection/
 [page]
   nextPrevInSectionSortOrder = 'asc'
-  nextPrevSortOrder = 'asc'
+  nextPrevSortOrder = 'asc'
diff --git a/common-theme/assets/styles/02-variables/fonts.scss b/common-theme/assets/styles/02-variables/fonts.scss
@@ -1,9 +1,6 @@
 :root {
-  --theme-font--display: "Space Grotesk", serif;
-  --theme-font--copy: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-    sans-serif;
-  --theme-font--system: 100 100%/2 "Monaco", "Menlo", "Space Grotesk", monospace;
-  --theme-font--emoji: "Fluent UI Emoji", Apple Color Emoji, "Noto Color Emoji",
-    "Segoe UI Emoji", "EmojiOne Color", "Twemoji Mozilla";
+  --theme-font--headings: 700 100%/1.5 Raleway, sans-serif;
+  --theme-font--ui: 400 100%/1.5 Raleway, sans-serif;
+  --theme-font--copy: 400 100%/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --theme-font--code: 100 100%/2 Monaco, Menlo, monospace;
 }
diff --git a/common-theme/assets/styles/03-elements/base.scss b/common-theme/assets/styles/03-elements/base.scss
@@ -3,7 +3,7 @@
 }
 body,
 html {
-  font-family: var(--theme-font--copy);
+  font: var(--theme-font--copy);
   font-size: 100%;
   background-color: var(--theme-color--paper);
   color: var(--theme-color--ink);
diff --git a/common-theme/assets/styles/03-elements/buttons.scss b/common-theme/assets/styles/03-elements/buttons.scss
@@ -1,7 +1,8 @@
 .e-button {
   // reset
   appearance: none;
-  font: 600 var(--theme-type-size--6) var(--theme-font--display), system-ui;
+  font: var(--theme-font--ui);
+  font-size: var(--theme-type-size--6);
   text-decoration: none;
   text-align: center;
   white-space: nowrap;
diff --git a/common-theme/assets/styles/03-elements/forms.scss b/common-theme/assets/styles/03-elements/forms.scss
@@ -34,14 +34,16 @@ main input:not([type="radio"]):not([type="checkbox"]) {
 }
 
 legend {
-  font: var(--theme-type-size--4) var(--theme-font--display);
+  font: var(--theme-font--copy);
+  font-size: var(--theme-type-size--4);
   // float legend in a fieldset of display grid to artificially recreate a box
   float: left;
   padding: var(--theme-spacing--1) 0;
 }
 label,
 input::placeholder {
-  font: var(--theme-type-size--3) var(--theme-font--system);
+  font: var(--theme-font--copy);
+  font-size: var(--theme-type-size--6);
 }
 
 [type="submit"] {
diff --git a/common-theme/assets/styles/03-elements/headings.scss b/common-theme/assets/styles/03-elements/headings.scss
@@ -2,7 +2,7 @@ $heading__levels: 1, 2, 3, 4, 5, 6;
 @each $h in $heading__levels {
   h#{$h},
   .e-heading__#{$h} {
-    font-family: var(--theme-font--display);
+    font: var(--theme-font--headings);
     font-size: var(--theme-type-size--#{$h});
     font-weight: 300;
     margin: 0;
diff --git a/common-theme/assets/styles/03-elements/images.scss b/common-theme/assets/styles/03-elements/images.scss
@@ -2,7 +2,7 @@ svg {
   height: 100%;
   width: auto;
   min-width: var(--theme-spacing--touchtarget);
-  font: var(--theme-font--system);
+  font: var(--theme-font--ui);
 }
 
 img {
@@ -32,6 +32,6 @@ figure img {
 
 figcaption {
   padding: var(--theme-spacing--gutter);
-  font-family: var(--theme-font--display);
+  font: var(--theme-font--ui);
   border-bottom: var(--theme-border);
 }
diff --git a/common-theme/assets/styles/03-elements/misc-phrasing.scss b/common-theme/assets/styles/03-elements/misc-phrasing.scss
@@ -20,9 +20,11 @@ iframe {
 
 code,
 .code,
-pre code .highlight pre,
-time {
-  font: var(--theme-font--system);
+pre code .highlight pre {
+  font: var(--theme-font--code);
+}
+p > code {
+  line-height: 1.5; // prevent inline code from breaking paragraph layouts
 }
 code:not([class]) {
   color: var(--theme-color--pop);
diff --git a/common-theme/assets/styles/03-elements/table.scss b/common-theme/assets/styles/03-elements/table.scss
@@ -13,7 +13,7 @@ table {
 }
 
 thead th {
-  font: var(--theme-font--system);
+  font: var(--theme-font--ui);
   background-color: var(--theme-color--block);
 }
 
diff --git a/common-theme/assets/styles/04-components/breadcrumbs.scss b/common-theme/assets/styles/04-components/breadcrumbs.scss
@@ -4,8 +4,8 @@
     display: flex;
     align-items: center;
     gap: var(--theme-spacing--1);
-    font: var(--theme-font--system);
-    font-size: var(--theme-type-size--6);
+    font: var(--theme-font--ui);
+    font-size: var(--theme-type-size--5);
   }
 
   &__link {
diff --git a/common-theme/assets/styles/04-components/codemirror.scss b/common-theme/assets/styles/04-components/codemirror.scss
@@ -3,7 +3,7 @@
   padding: var(--theme-spacing--gutter);
 
   .cm-scroller {
-    font: var(--theme-font--system);
+    font: var(--theme-font--code);
   }
 
   .hl_line:not(.cm-activeLine) {
diff --git a/common-theme/assets/styles/04-components/emoji.scss b/common-theme/assets/styles/04-components/emoji.scss
diff --git a/common-theme/assets/styles/04-components/page-footer.scss b/common-theme/assets/styles/04-components/page-footer.scss
@@ -5,6 +5,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font: var(--theme-font--system);
+    font: var(--theme-font--ui);
   }
 }
diff --git a/common-theme/assets/styles/04-components/page-header.scss b/common-theme/assets/styles/04-components/page-header.scss
@@ -96,7 +96,9 @@
   &__time {
     display: block;
     color: var(--theme-color--ink);
-    font: var(--theme-font--system);
+    font: var(--theme-font--ui);
+    font-weight: 300;
+    line-height: normal;
     font-size: var(--theme-type-size--6);
     background-color: var(--theme-color--outline);
     margin-bottom: calc(-1 * var(--theme-spacing--3));
diff --git a/common-theme/assets/styles/04-components/tabs.scss b/common-theme/assets/styles/04-components/tabs.scss
@@ -9,7 +9,7 @@
   }
   &__tab {
     cursor: pointer;
-    font-family: var(--theme-font--display);
+    font: var(--theme-font--ui);
     transform: translateY(2px);
     padding: var(--theme-spacing--1) var(--theme-spacing--2);
     border-top: var(--tabline) solid var(--theme-color--outline);
diff --git a/common-theme/assets/styles/04-components/timeline.scss b/common-theme/assets/styles/04-components/timeline.scss
@@ -28,7 +28,7 @@
       color: var(--theme-color--ink);
       transform: translateX(calc(var(--box) * -1.5));
       transition: background-color 0.3s;
-      font: var(--theme-font--system);
+      font: var(--theme-font--ui);
     }
     &:hover:before {
       background-color: var(--theme-color--pop);
diff --git a/common-theme/assets/styles/04-components/toc.scss b/common-theme/assets/styles/04-components/toc.scss
@@ -23,7 +23,7 @@
   // feel free to tackle if you have spare time
   ol > li {
     
-    font-family: var(--theme-font--display);
+    font: var(--theme-font--ui);
     font-weight: 300;
     &:before {
       display: inline-block;
@@ -45,7 +45,7 @@
 
     li {
       text-transform: none;
-      font-family: var(--theme-font--copy);
+      font: var(--theme-font--copy);
       &::marker {
         color: var(--theme-color--pop);
       }
diff --git a/common-theme/assets/styles/states/print.scss b/common-theme/assets/styles/states/print.scss
@@ -47,7 +47,7 @@
 
     &::before {
       content: attr(data-heading);
-      font-family: var(--theme-font--display);
+      font: var(--theme-font--ui);
       font-size: var(--theme-type-size--3);
     }
   }
diff --git a/common-theme/hugo.toml b/common-theme/hugo.toml
@@ -26,7 +26,7 @@ defaultContentLanguageInSubdir = false
         url = ""
 
 [params]
-googleFonts="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Inter:wght@400;600&display=swap"
+googleFonts="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"
 description = "A free and open source software development programme."
 startTime="10:00"
 # main_website = ""
diff --git a/org-cyf-itp/static/filterFilms.html b/org-cyf-itp/static/filterFilms.html
@@ -4,7 +4,7 @@
     <title>Film Search</title>
     <style>
       body {
-        font-family: Monaco, monospace;
+        font-family: "Monaco", "Menlo", monospace;
         background: linear-gradient(#282130, #1f1926) no-repeat;
         min-height: 100vh;
         padding: 5rem 3rem;
diff --git a/org-cyf-piscine/assets/custom-theme/02-variables/fonts.scss b/org-cyf-piscine/assets/custom-theme/02-variables/fonts.scss
diff --git a/org-cyf-piscine/hugo.toml b/org-cyf-piscine/hugo.toml
@@ -5,7 +5,7 @@ title = "Piscine"
     path = "github.com/CodeYourFuture/curriculum/org-cyf-theme"
 
 [params]
-googleFonts="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Inter:wght@400;600&display=swap"
+googleFonts="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"
 
 [markup]
 # I've configured markdown so you don't have to
@@ -21,4 +21,4 @@ googleFonts="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500
 # because of this 'unexpected behaviour' https://gohugo.io/methods/page/nextinsection/
 [page]
   nextPrevInSectionSortOrder = 'asc'
-  nextPrevSortOrder = 'asc'
+  nextPrevSortOrder = 'asc'
diff --git a/org-cyf-sdc/assets/custom-theme/02-variables/fonts.scss b/org-cyf-sdc/assets/custom-theme/02-variables/fonts.scss
diff --git a/org-cyf-sdc/hugo.toml b/org-cyf-sdc/hugo.toml
@@ -22,7 +22,7 @@ baseURL = "https://sdc.codeyourfuture.io/"
 
 
 [params]
-googleFonts="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Inter:wght@400;600&display=swap"
+googleFonts="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"
 
 [markup]
 # I've configured markdown so you don't have to
diff --git a/org-cyf-theme/assets/custom-theme/02-variables/fonts.scss b/org-cyf-theme/assets/custom-theme/02-variables/fonts.scss
diff --git a/org-cyf-theme/assets/custom-theme/04-components/timeline.scss b/org-cyf-theme/assets/custom-theme/04-components/timeline.scss
@@ -5,7 +5,7 @@
     &:before {
       background-color: var(--theme-color--brand);
       color: var(--theme-color--ink);
-      font: var(--theme-font--system);
+      font: var(--theme-font--ui);
     }
     &:hover:before {
       background-color: var(--theme-color--accent);
diff --git a/org-cyf-theme/hugo.toml b/org-cyf-theme/hugo.toml
@@ -49,7 +49,7 @@ org = "https://github.com/CodeYourFuture"
 repo = "https://github.com/CodeYourFuture/curriculum/"
 pdrepo = "CYF-PD"
 root = "curriculum"
-googleFonts="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Raleway:wght@300;600;800;900&family=Lato:wght@500;800&display=swap"
+googleFonts="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"
 
 # We use a proxy which concatenates paginated responses, otherwise we miss results.
 # Daniel is currently hosting this code https://github.com/illicitonion/github-issue-proxy but we should work out a long-term maintainable solution to this problem.

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`--gap: 1ch;`
`11`	`11`	`}`
`12`	`12`	`body {`
`13`		`- font-family: Monaco, monospace;`
	`13`	`+ font-family: "Monaco", "Menlo", monospace;`
`14`	`14`	`background: linear-gradient(var(--paper), var(--paper-light)) no-repeat;`
`15`	`15`	`min-height: 100vh;`
`16`	`16`	`padding: 5rem 3rem;`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`}`
`4`	`4`	`body,`
`5`	`5`	`html {`
`6`		`- font-family: var(--theme-font--copy);`
	`6`	`+ font: var(--theme-font--copy);`
`7`	`7`	`font-size: 100%;`
`8`	`8`	`background-color: var(--theme-color--paper);`
`9`	`9`	`color: var(--theme-color--ink);`
Original file line number	Diff line number	Diff line change
`@@ -34,14 +34,16 @@ main input:not([type="radio"]):not([type="checkbox"]) {`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`legend {`
`37`		`- font: var(--theme-type-size--4) var(--theme-font--display);`
	`37`	`+ font: var(--theme-font--copy);`
	`38`	`+ font-size: var(--theme-type-size--4);`
`38`	`39`	`// float legend in a fieldset of display grid to artificially recreate a box`
`39`	`40`	`float: left;`
`40`	`41`	`padding: var(--theme-spacing--1) 0;`
`41`	`42`	`}`
`42`	`43`	`label,`
`43`	`44`	`input::placeholder {`
`44`		`- font: var(--theme-type-size--3) var(--theme-font--system);`
	`45`	`+ font: var(--theme-font--copy);`
	`46`	`+ font-size: var(--theme-type-size--6);`
`45`	`47`	`}`
`46`	`48`
`47`	`49`	`[type="submit"] {`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ svg {`
`2`	`2`	`height: 100%;`
`3`	`3`	`width: auto;`
`4`	`4`	`min-width: var(--theme-spacing--touchtarget);`
`5`		`- font: var(--theme-font--system);`
	`5`	`+ font: var(--theme-font--ui);`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`img {`
`@@ -32,6 +32,6 @@ figure img {`
`32`	`32`
`33`	`33`	`figcaption {`
`34`	`34`	`padding: var(--theme-spacing--gutter);`
`35`		`- font-family: var(--theme-font--display);`
	`35`	`+ font: var(--theme-font--ui);`
`36`	`36`	`border-bottom: var(--theme-border);`
`37`	`37`	`}`