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/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue

@@ -58,8 +58,6 @@ function formatAsMarkdownListItem(content: string): string {
   flex-direction: column;
   flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
   max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
-
   font-size: $font-size-absolute-normal;
-  font-family: $font-main;
 }
 </style>

src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue

@@ -41,7 +41,6 @@ $text-color: $color-on-primary;
 .markdown-text {
   color: $text-color;
   font-size: $font-size-absolute-normal;
-  font-family: $font-main;
   @include markdown-text-styles;
 }
 </style>

src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss

@@ -1,4 +1,5 @@
 @use "@/presentation/assets/styles/main" as *;
+@use 'sass:math';
 
 @mixin code-block() {
   pre {
@@ -22,18 +23,24 @@
   $color-background,
   $code-block-padding,
 ) {
+  $font-size-code: $font-size-relative-smaller;  // Keep relative size to scale right with different text sizes around.
   $border-radius: 2px; // Subtle rounding still maintaining sharp design.
 
   @include base-code {
-    font-family: $font-normal;
+    font-family: $font-family-monospace;
     border-radius: $border-radius;
-    font-size: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around.
+    font-size: $font-size-code;
   }
 
   @include inline-code {
     background: $color-background;
     word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.
-    padding: 0.2em 0.4em; // Balanced padding for readability, with `em` units scaling with font size.
+
+    $font-size-code-in-decimal: math.div($font-size-code, 100%); // Converts percentage (e.g., 85%) to decimal (e.g., 0.85) for calculations.
+    $font-size-code-in-em: calc(1em * #{$font-size-code-in-decimal});
+    $vertical-padding: calc((1em - #{$font-size-code-in-em}) / 2);
+    $horizontal-padding: calc(#{$font-size-code-in-em} * 0.4);
+    padding: $vertical-padding $horizontal-padding;
   }
 
   @include code-block {

src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue

@@ -23,7 +23,6 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 
 .node-title {
-  font-family: $font-main;
   font-size: $font-size-absolute-large;
 }
 </style>

src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue

@@ -64,4 +64,3 @@ export default defineComponent({
   },
 });
 </script>
-./Reverter/Reverter

src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue

@@ -75,22 +75,24 @@ export default defineComponent({
 @use 'sass:math';
 @use "@/presentation/assets/styles/main" as *;
 
-$font-size              : $font-size-absolute-small;
+$font-size                    : $font-size-absolute-small;
 
-$color-toggle-unchecked : $color-primary-darker;
-$color-toggle-checked   : $color-on-secondary;
-$color-text-unchecked   : $color-on-primary;
-$color-text-checked     : $color-on-secondary;
-$color-bg-unchecked     : $color-primary;
-$color-bg-checked       : $color-secondary;
-$size-height            : $font-size + 8px;
-$size-circle            : math.div($size-height * 2, 3);
-$padding-horizontal     : 0.40em;
-$gap                    : 0.25em;
+$color-toggle-unchecked       : $color-primary-darker;
+$color-toggle-checked         : $color-on-secondary;
+$color-text-unchecked         : $color-on-primary;
+$color-text-checked           : $color-on-secondary;
+$color-bg-unchecked           : $color-primary;
+$color-bg-checked             : $color-secondary;
+$padding-horizontal           : calc($font-size * 0.4);
+$padding-vertical             : calc($font-size * 0.3);
+$size-height                  : calc($font-size + ($padding-vertical * 2));
+$size-circle                  : math.div($size-height * 2, 3);
+
+$gap-between-circle-and-text  : 0.25em;
 
 @mixin locateNearCircle($direction: 'left') {
   $circle-width: calc(#{$size-circle} + #{$padding-horizontal});
-  $circle-space: calc(#{$circle-width} + #{$gap});
+  $circle-space: calc(#{$circle-width} + #{$gap-between-circle-and-text});
   @if $direction == 'left' {
     margin-left: $circle-space;
   } @else {
@@ -103,9 +105,10 @@ $gap                    : 0.25em;
   overflow: hidden;
   position: relative;
   width: auto;
+
+  font-size: $font-size;
   height: $size-height;
   border-radius: $size-height;
-  font-size: $font-size;
 
   input.toggle-input {
     position: absolute;
@@ -120,7 +123,7 @@ $gap                    : 0.25em;
   .toggle-animation {
     display: flex;
     align-items: center;
-    gap: $gap;
+    gap: $gap-between-circle-and-text;
     width: 100%;
     height: 100%;
     background-color: $color-bg-unchecked;
@@ -155,7 +158,7 @@ $gap                    : 0.25em;
   }
 
   .label {
-    font-weight: bold;
+    font-weight: bold; // TODO: Babaya sor
     transition: all 0.3s ease-out, color 0s;
     &.label-off {
       @include locateNearCircle('left');