feat(typography): migrate from Google Fonts to local font hosting

feat(typography): migrate from Google Fonts to local font hosting

Replaced external Google Fonts integration with locally hosted font files
for Oswald and Roboto.

- Added local @font-face definitions for Oswald (400, 500, 700)
- Added local @font-face definitions for Roboto (400, 500, 700)
- Removed Google Fonts enqueue and external requests
- Implemented unicode-range optimized font loading (latin subset)
- Fixed font file path inconsistencies causing fallback rendering
- Ensured correct font-weight mapping across all variants
- Maintained existing typography system via CSS variables

Result:
- No external font requests (fonts.googleapis.com / fonts.gstatic.com removed)
- Improved performance and privacy (GDPR compliant)
- Consistent rendering with original Google Fonts appearance
- Full control over font loading and optimization

css/fonts.css

@@ -1,35 +1,142 @@
+/* =========================
+   Local Fonts
+   ========================= */
+
+/* OSWALD */
+@font-face {
+  font-family: 'Oswald';
+  src: url('../fonts/oswald-400.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Oswald';
+  src: url('../fonts/oswald-500.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Oswald';
+  src: url('../fonts/oswald-700.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+/* ROBOTO */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url('../fonts/roboto-400.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
+                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+                 U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* ROBOTO 500 */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url('../fonts/roboto-500.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
+                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+                 U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* ROBOTO 700 */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url('../fonts/roboto-700.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
+                 U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+                 U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+
 /* =========================
    Typography System (Static)
    ========================= */
 
 :root {
-  --primary-font: 'Oswald', sans-serif;
+  --primary-font: 'Oswald', var(--zeitfresser-heading-fallback);
   --secondary-font: 'Roboto', sans-serif;
 
   --site-identity-font-size: 40px;
+
   --font-weight: 400;
   --line-height: 1.6;
 }
 
-/* Base */
+
-body {
+/* =========================
+   Base Typography
+   ========================= */
+
+body,
+p,
+div,
+span,
+article,
+section,
+li,
+input,
+textarea,
+button {
   font-family: var(--secondary-font);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
 }
 
-/* Headlines */
+
+/* =========================
+   Headlines (Hierarchy Fix)
+   ========================= */
+
 h1, h2, h3, h4, h5, h6,
 .entry-title {
   font-family: var(--primary-font);
-  font-weight: var(--font-weight);
+  font-weight: 500;
+  line-height: 1.3;
 }
 
-/* Site Title */
+
+/* =========================
+   Site Title (Branding)
+   ========================= */
+
 .site-title,
 .site-title a {
   font-family: var(--primary-font);
   font-size: var(--site-identity-font-size);
-  font-weight: var(--font-weight);
+  font-weight: 700;
   line-height: 1.2;
 }
+
+
+/* =========================
+   Secondary Text
+   ========================= */
+
+.site-description,
+.entry-content,
+.news-snippet .excerpt {
+  font-family: var(--secondary-font);
+}

functions.php

@@ -201,19 +201,6 @@ function zeitfresser_enqueue_static_colors() {
 }
 add_action( 'wp_enqueue_scripts', 'zeitfresser_enqueue_static_colors', 20 );
 
- /**
- * Load Google Fonts (required for static font setup)
- */
-function zeitfresser_enqueue_google_fonts() {
-    wp_enqueue_style(
-        'zeitfresser-google-fonts',
-        'https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap',
-        array(),
-        null
-    );
-}
-add_action('wp_enqueue_scripts', 'zeitfresser_enqueue_google_fonts');
-
 function zeitfresser_enqueue_static_fonts() {
     wp_enqueue_style(
         'zeitfresser-fonts',
@@ -281,18 +268,20 @@ function zeitfresser_cleanup_wp_head() {
 add_action( 'init', 'zeitfresser_cleanup_wp_head' );
 
 /**
- * Ensure Google Fonts domains are allowed and preconnected
+ * Preload local fonts for better performance
  */
-add_filter('wp_resource_hints', function($urls, $relation_type) {
+function zeitfresser_preload_fonts() {
-    if ($relation_type === 'preconnect') {
+    ?>
-        $urls[] = 'https://fonts.googleapis.com';
+    <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/oswald-400.woff2" as="font" type="font/woff2" crossorigin>
-        $urls[] = array(
+    <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/oswald-500.woff2" as="font" type="font/woff2" crossorigin>
-            'href' => 'https://fonts.gstatic.com',
+    <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/oswald-700.woff2" as="font" type="font/woff2" crossorigin>
-            'crossorigin' => 'anonymous',
+
-        );
+    <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/roboto-400.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/roboto-500.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/roboto-700.woff2" as="font" type="font/woff2" crossorigin>
+    <?php
 }
-    return $urls;
+add_action('wp_head', 'zeitfresser_preload_fonts', 1);
-}, 10, 2);
 
 /**
  * Remove front-end dashicons for visitors.