Es gibt eine Vielzahl von Web-Schriften, die Du kostenfrei nutzen kannst. Aber …
Webfonts dürfen wegen der DSGVO leider nicht mehr von externen Servern wie google abgerufen werden. Darum müssen die Schriftdateien auf Deinem Server gespeichert und über das Child-Theme eingebunden werden.
Unzählige kostenfreie Schriften findest Du hier: https://fonts.google.com
Allerdings dient diese Seite derzeit nurmehr zur schnellen Voransicht währnde der Entwicklung. Sobald die Website öffentlich wird, müssen Schriften selbst gehostet werden.
Hintergrund: Urteil des Landgericht München / Artikel zum Thema auf golem.de
Allerdings: es gibt auch ein Gesetz gegen Abmahnungsmissbrauch (Link hier)
Fazit: Sich auf dem laufenden halten und tun was geht.
1. Google Fonts deinstallieren
Sollte Dein Theme Google Fonts bereitstellen, muss diese Verbindung zunächst gekappt werden. Das kann von Theme zu Theme unterschiedlich sein.
Webtimiser schreibt, dass folgender Code in der functions.php gut funktioniert:
function removeGoogleFonts(){
global $wp_styles;
$regex = '/fonts\.googleapis\.com\/css\?family/i';
foreach($wp_styles->registered as $registered) {
if( preg_match($regex, $registered->src) ) {
wp_dequeue_style($registered->handle);
}
}
}
add_action('wp_enqueue_scripts', 'removeGoogleFonts', 999);2. Schriften selbst speichern und einbetten
Wenn Du Dich für eine oder mehrere Schriftarten und Schnitte entschieden hast, kannst Du Dir den nötigen Coden samt Dateien hier abrufen:
https://google-webfonts-helper.herokuapp.com/fonts
Wichtig: Du kannst unter „3. Copy CSS“ eine Einstellung für den Pfad treffen (Customize folder prefix). Stelle hier „fonts/“ ein.!
Den Code fügst Du der style.css Deines Child-Themes zu (hier zB die Lato regular):
/* lato-regular - latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url('fonts/lato-v22-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('fonts/lato-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/lato-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/lato-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/lato-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/lato-v22-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
Den runtergeladenen Ordner (zB lato-v22-latin.zip) entpackst Du und zeihst die Dateien in einen Ordner „fonts“ in Deinem Child-Theme.
3. Schriften anzeigen
Wenn Dein Theme Google Fonts nutzt, sollte nun einfach die Bezugsquelle geändert und die Darstellung korrekt sein.
Andernfalls musst Du die Typografie in der style.css einstellen. Anbei ein paar Standards:
.body {
font-family: 'Lato', Arial, sans-serif;
font-style: normal;
font-weight: 400;
}
h1, .h1, h2, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: 'XY', Arial, sans-serif; /* falls Lato -> diese Zeile löschen */
font-weight: 700; /* dann musst Du diesen Schnitt auch noch herunterladen */
}
p {
font-family: inherit; /* vererbt von body */
}Mehr zu Fonts CSS hier: https://www.w3schools.com/css/css_font.asp
Eine ausführliche Anleitung finde ich diesen Artikel hier sehr hilfreich: https://www.webtimiser.de/webfonts-lokal-in-wordpress/
