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/Menu/MenuOptionList.vue

@@ -27,7 +27,6 @@ export default defineComponent({
 
 $gap: 0.25rem;
 .list {
-  font-family: $font-normal;
   display: flex;
   :deep(.items) {
     > * + *::before {

src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue

@@ -110,7 +110,6 @@ ul {
   .includes {
     display: flex;
     gap: 0.5em;
-    font-weight: 500;
     .icon {
       color: $color-success;
     }
@@ -119,9 +118,7 @@ ul {
   .considerations {
     display: flex;
     gap: 0.5em;
-    .text {
-      font-weight: 500;
-    }
+    font-weight: bold;
     .icon {
       color: $color-danger;
     }