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
+115 -8
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);
}