Change fonts for improved readability

Key changes:

- Change main font to Roboto Slab for enhanced readability.
- Change code font to 'Source Code Pro' for consistent monospace code
  rendering.
- Import and set code font explicitly for uniform appearance across
  platforms.
- Update Slabo 27px (logo font) version from v6 to v14.
- Update Yesteryear (cursive font) version from v8 to v18.
- Drop support for historic browser-specific formats, retaining only
  WOFF2 for modern and TTF for legacy browsers.
- Use `font-display: swap` to improve perceived load times and minimize
  layout shifts.

Supporting changes:

- Simplify font-weight usage to 'normal' and 'bold' for consistency.
- Adjust inline code padding for better scalability and prevent
  overflow.
- Introduce `$font-main` as main font variable.
- Remove specification of main font as it's best practice to rely on the
  default font defined on `body` style.
- Specify font in code area to ensure it uses the code font consistently
  as the rest of the application.
- Remove local font search through `local` to simplify the import logic
  and prioritize consistency over performance.
- Import bold font explicitly (`font-weight: 700`) for smooth and
  consistent rendering.
- Move `font-family` definitions to `_typography.scss` to better adhere
  to the common standards and conventions.
- Refactor font variables to have `font-family-` prefix instead of
  `font-` to improve clarity and differentiation between `font-size`
  variables.
- Rename 'artistic' font to 'cursive' for preciseness and clarity.
- Use smaller font sizes to match the new main font size, as Roboto Slab
  is relatively larger.
- Add missing fallbacks for serif fonts to improve fault tolerance.
- Change padding slightly on toggle switch for revert buttons to align
  well with new main font and its sizing.

src/presentation/components/Code/CodeButtons/IconButton.vue

@@ -98,10 +98,9 @@ export default defineComponent({
   }
   .button__text {
     display: none;
-    font-family: $font-artistic;
+    font-family: $font-family-cursive;
     font-size: $font-size-absolute-large;
     color: $color-primary;
-    font-weight: 500;
     @include hover-or-touch {
       display: block;
     }

src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue

@@ -56,7 +56,7 @@ export default defineComponent({
   display: inline-flex;
   white-space: nowrap;
   justify-content: space-between;
-  font-family: $font-normal;
+  font-family: $font-family-monospace;
   background-color: $color-primary-darker;
   color: $color-on-primary;
   align-items: center;

src/presentation/components/Code/TheCodeArea.vue

@@ -210,6 +210,7 @@ function getDefaultCode(language: ScriptingLanguage, project: ProjectDetails): s
     height: 100%;
     overflow: auto;
     font-size: $font-size-absolute-small;
+    font-family: $font-family-monospace;
     &__highlight {
       background-color: $color-secondary-light;
       position: absolute;