Nachdem mit der WordPress Version 4.6 die Google Schriftart „Open Sans“ aus dem Backend verschwunden ist wollte ich das auch für das Frontend. Mir gefiel die neue Schrifteinstellung so gut das ich mir Gedanken zur Umsetzung machte.
Als Theme kam mal wieder das Standart WordPress Theme zum Einsatz, Twenty Fifteen. Nachdem ich schon einmal über die Anpassung der Farben und eines Logos geschrieben habe, geht es jetzt weiter mit der Optimierung.
Eine kurze Ergänzung zum verlinkten Beitrag. Die Anpassung für das Logo muss mit der aktuellen Version von Twenty Fifteen (1.6 | Stand 09/2016) nicht mehr durchgeführt werden. Außer man möchte unbedingt eine SVG-Datei als Logo einsätzen ;).
Kommen wir nun zum Kernthema.
Schriftart von Twenty Fifteen anpassen
Wie im „neuen“ WordPress Backend will ich das die jeweilige System Schriftart verwendet wird. Um das zu erreichen muss du die font-family in der CSS-Datei des Child-Themes angepasst werden.
Code-Beispiel anhand der Backend Schriftarten:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;Hier könntest du natürlich auch eine andere Google Font einsetzen aber dies ist ein Beispiel ohne Google Fonts. Du muss dann nur noch daran denken das die Schrift separat geladen werden muss.
Also nächstes folgen die CSS ID´s und Klassen welche geändert werden müssen. Hier auch schon mit den von mir gewünschten Schriftarten hinterlegt.
body,
button,
input,
select,
textarea {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
blockquote cite,
blockquote small {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
::-webkit-input-placeholder {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
:-moz-placeholder {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
::-moz-placeholder {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
:-ms-input-placeholder {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.post-password-form label {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.main-navigation .menu-item-description {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.post-navigation .meta-nav {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.post-navigation .post-title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.pagination {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.image-navigation,
.comment-navigation {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.site-title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.site-description {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.widget-title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.widget_calendar caption {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.widget_rss .rss-date,
.widget_rss cite {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.author-heading {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.entry-footer {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.page-title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.page-links {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.entry-caption {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.comments-title,
.comment-reply-title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.comment-metadata,
.pingback .edit-link {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.comment-list .reply a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.comment-form label {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.comment-notes,
.comment-awaiting-moderation,
.logged-in-as,
.form-allowed-tags {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.no-comments {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.form-allowed-tags code {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.wp-caption-text {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.gallery-caption {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.widecolumn label,
.widecolumn .mu_register label {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}Sobald das gespeichert und hochgeladen ist sind alle Text Elemente angepasst und nutzen die neu gewählte Schriftart.
Da mir das aber nicht reicht, wollte auch das die Google Font nicht mehr geladen wird. Dadurch spare ich mir die Abfrage bei Google und mache meine Website gleichzeitig wieder etwas schneller beim laden.
Das laden der Google Font deaktivieren
Bei StackOverflow habe ich die Antwort auf die Frage gefunden! Hier wird kurz beschrieben wie ich das laden der Schriftart bei Google Fonts verhindern kann.
function wpse_dequeue_google_fonts() {
wp_dequeue_style( 'twentyfifteen-fonts' );
}
add_action( 'wp_enqueue_scripts', 'wpse_dequeue_google_fonts', 20 );Mit dem Snippet für die functions.php im Child Theme kann man das laden unterbinden. Dadurch wäre das Theme und das Backend von WordPress frei von Google Fonts. Außer, ja es gibt immer ein aber, installierte und aktivierte Plugins laden sich für den Eigenbedarf wieder welche runter.
Falls ich irgendwie unverständlich oder zu wenig erklärt habe dann schrieb mir in die Kommentar und ich versuche das auszubessern.
Schreibe einen Kommentar