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/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');