Dome/Zeitfresser-Wordpress-Theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Dome
2026-04-23 21:00:32 +02:00
parent d066342413
commit 5152784a20
8 changed files with 128 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/fonts.css
+114 -7
View File
@@ -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);
}
fonts/oswald-400.woff2
BIN
View File
Binary file not shown.
fonts/oswald-500.woff2
BIN
View File
Binary file not shown.
fonts/oswald-700.woff2
BIN
View File
Binary file not shown.
fonts/roboto-400.woff2
BIN
View File
Binary file not shown.
fonts/roboto-500.woff2
BIN
View File
Binary file not shown.
fonts/roboto-700.woff2
BIN
View File
Binary file not shown.
functions.php
+13 -24
View File
@@ -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) {
if ($relation_type === 'preconnect') {
$urls[] = 'https://fonts.googleapis.com';
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
'crossorigin' => 'anonymous',
);
}
return $urls;
}, 10, 2);
function zeitfresser_preload_fonts() {
?>
<link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/oswald-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/oswald-500.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/oswald-700.woff2" as="font" type="font/woff2" crossorigin>
<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
}
add_action('wp_head', 'zeitfresser_preload_fonts', 1);
/**
* Remove front-end dashicons for visitors.