Schrift:
Fonts von Google und Lokal; Systemfonts; CSS

Die aktuelle Auszeichnung dieser Websites ist des Titels in 'Handschrift', welche hier Google Fonts sind. Des anderen sind Systemfonts in Anwendung. Vom Theme her wĂ€re hier die Schriftart Lato, welches ebenso 'Google Fonts'. Sofern ist hier des Gebrauchs beschrieben. Das ist nun fĂŒr die Google Fonts und das direkte einbinden auf der Website. NĂ€chst ist das mit den Systemfonts.

Fonts

Google F.

Google Fonts

Google Fonts aussuchen.

  • Link anklicken.
  • Schrift aussuchen 
 ĂŒber Sentence anklicken.
  • Schrift
  • Somit erscheint Family Selected (am Bildschirm unten) und nach dessen Aufruf sind die Codes zur EinfĂŒgung fĂŒr die header.php und zum CSS zu kopieren.

Family Selected

Schrift einbetten

Um die Schriftart in eine Webseite einzubetten, den folgenden Code kopieren und in header.php in den <head> des HTML-Dokuments einfĂŒgen.

Theme/header.php gleich unter <head>

<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
In CSS angeben

Die CSS-Regel fĂŒr diese Familie (weiter siehe nĂ€chst Überschrift):

font-family: 'Architects Daughter', cursive;

Schrift fĂŒr die Website konfigurieren

Die Schrift ĂŒber CSS verĂ€ndern, hierzu eignet sich Customizer (Dashboard/Design/Customizer).

Bspw.
  • Beispiels dieser Website, fĂŒr Seiten als auch BeitrĂ€gen: Startseite (das Raster) in „Lato“, Titel der Website (s. li. oben) und Titel Seite/BeitrĂ€ge wiederum in Handschrift:

Anmerkung: Theme Twenty Fourteen Titels GROSSSCHREIBUNG in BeitrĂ€gen gegenlĂ€ufig die Schrift in Groß- und Kleinbuchstaben, also: text-transform: none;

/* --- TITEL in Handschrift --- */
/* Tiltel auf Seiten */
.page .entry-title {
 font-family: 'Architects Daughter';
}

/* - Titel in BeitrÀgen - */
.single .entry-title {
 font-family: 'Architects Daughter';
 color: #5EBBF1;
 text-transform: none;
/*font-size: 35px;*/
}

/* - Titel ... - */
.archive .entry-title a, .tag .entry-title a, .search .entry-title a, .blog .entry-title a {
 font-family: 'Architects Daughter';
 color: #5EBBF1;
 text-transform: none;
 font-size: 30px;
}

/* - (Startseite) Titel Raster unter Bilder - */
.featured-content .entry-title a {
 font-family: 'Lato';
 color: #2b2b2b;
 text-transform: none;
}

/* - Titel der Website - */
h1.site-title a {
 font-family: 'Architects Daughter';
 text-transform: none;
 color: #2b2b2b;
}

/* --- Ende, Titel in Handschrift --- */

 

Mehr oder weniger eine kleine Anmerkung: Mit Theme update Twenty Fourteen 2.3 funktionierten die Google Fonts mit eingefĂŒgten Code in header.php vorĂŒbergehend nicht mehr. Mit dem schlichten Plug-in WP Google Fonts war dies auf die Schnelle wieder herzustellen.

G. F. einbinden

Google Fonts in die Website einbinden

GemĂ€ĂŸ Google Fonts lokal einbinden. Dem Titel folgend gehts auch zum Google Webfonts Helper. Soweit ist alles sich selbsterklĂ€rend.

Fonts auf den Server uploaden

Den Ordner fonts  erstellen – und wo?

Also hier der Installation ist das im Hauptverzeichnis der wordpress Installation. Das ist da, wo die Dateien und die Ordner wp-content, wp-admin und wp-includes sind. Dazu dort, also im Ordner wordpress, den neuen Ordner erstellen und diesem Beispiel als fonts benennen.

Das andere so, wie es obigen Link 'Google Fonts lokal einbinden' beschrieben ist.

  • Der Code in der header.php, s. im vorhergehenden Tab Google F. „Family Selected / Schrift einbetten“! – ist dann nicht einzutragen bzw. zu entfernen.

Anfragen zum Google Server blockieren

Hier dem Theme dieser Website ist bspw. dies in der functions.php

/* Exit if accessed directly */
defined( 'ABSPATH' ) || die();
function google_fonts_load_disable( $styles ) {
$styles->add( 'open-sans' , '' ); // Backend
$styles->add( 'twentyfourteen-lato' , '' );
}
add_action( 'wp_default_styles', 'google_fonts_load_disable', 5 );

Die Snippets zur functions.php im Plug-in Code Snippets abspeichern. Dazu ist das zur Verwaltung der Codes als auch der Schutz bei Theme-Update.

CSS

Bedenke folgendes Beispiel ergeht erst wie hier nach der Konfiguration der 'System Fonts'. S. im nÀchst Tab.

Also Klick, wie es hier der Website im Child-Theme style.css
/* --- TITEL in Handschrift --- */
/* swanky-and-moo-moo-regular - latin */
@font-face {
font-family: 'Swanky and Moo Moo';
font-style: normal;
font-weight: 400;
src: url('/fonts/swanky-and-moo-moo-v9-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Swanky and Moo Moo'), local('SwankyandMooMoo'),
url('/fonts/swanky-and-moo-moo-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/swanky-and-moo-moo-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/swanky-and-moo-moo-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/fonts/swanky-and-moo-moo-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/swanky-and-moo-moo-v9-latin-regular.svg#SwankyandMooMoo') format('svg'); /* Legacy iOS */
}

/* Tiltel auf Seiten */
.page .entry-title {
font-family: 'Swanky and Moo Moo', cursive;
font-style: normal;
}
/* Titel in BeitrÀgen */
.single .entry-title {
font-family: 'Swanky and Moo Moo', cursive;
color: #5EBBF1;
text-transform: none;
/*font-display: auto;*/
font-size: 40px;
font-style: normal;
}

/* Titel ... */
.archive .entry-title a, .tag .entry-title a, .search .entry-title a, .blog .entry-title a {
font-family: 'Swanky and Moo Moo', cursive;
color: #5EBBF1;
text-transform: none;
/*font-display: auto;*/
font-size: 35px;
font-style: normal;
}

/* Titel Startseite unter Bilder 
.featured-content .entry-title a {
font-family: 'Lato';
color: #2b2b2b;
text-transform: none;
}*/

/* Titel der Website */
h1.site-title a {
font-family: 'Swanky and Moo Moo', cursive;
text-transform: none;
color: #2b2b2b;
font-size: 30px;
font-style: normal;
}

h1.site-title a:hover,
h1.site-title a:focus,
h1.site-title a:active {
color: #787878;
}

/* --- Ende, Titel in Handschrift --- */

System F.

System Fonts

  • Des VerstĂ€ndnis wegen gehört der Link hier zum Beitrag fastwp.de. Erst danach ergeht das nun folgende.

Vorlage

  • p = Normaler Text
  • ul, ol , li  =  AuzĂ€hlungszeichen
  • blockquote = Hervor gehobener Text
  • h2, h3, h4, h5, h6 = Überschriften
  • b = Fettschrift visuell
  • strong = Fettschrift visuell und fĂŒr Suchmaschinen wichtiger Text.

Die h1 sind hier ausgelassen und betrĂ€fe neben der TitelĂŒberschrift und Website-Name (welche beiden ĂŒber Google Fonts in Handschrift sind), die Überschriften zu den Widgets.

Kooperation: Wie kann ich die Schriftart Àndern?

Der normale Text auf Seiten / BeitrÀge, die AufzÀhlungszeichen und hervor gehobener Text (blockquote) in Zusammenfassung

Die Überschriften und <b>Text</b> und die Texte / Wörter, welche mit <strong> sind, kompakt darzustellen. Diesen Falles sind eigenes Markup, als font-weight:100; anzulegen.

p, ul, ol, li, blockquote {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:
 grayscale;
 font-weight:100;
 /*color:#2b2b2b;*/
}

h2, h3, h4, h5, h6, b, strong {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; text-rendering: optimizeSpeed;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing:
 grayscale;
 font-weight:500;
 /*color:#2b2b2b;*/
 }

/* Titel, Startseite unter Bilder im Raster */
 .featured-content .entry-title a {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; text-rendering: optimizeSpeed;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing:
 grayscale;
 text-transform: none; /*Spez. Twenty Fourteen*/
 /*color:#2b2b2b;*/
 }

Das VerstĂ€ndnis fĂŒr Schriftgewichtung: font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900. Die Werte gehen von extra dĂŒnn bis extra fett. Sofern die installierte Schriftart diese Abstufung unterstĂŒtzt. S. ebenso Schriftformatierung/font-weight

FĂŒr derlei Editierung ist unser Customizer (Dashboard / Design / Customizer) sehr gut, um in Vorschau die Formation zu finden.

Anmerkung um Irritieren vorzubehalten

Sind die System Fonts im Edit-CSS (Customizer) definiert – also die Schrift mithin Listenpunkte (ul, ol, li) – mit Markup color. Mithin wird die ursprĂŒngliche Schriftfarbe des Themes in Edition 'System Fonts' ĂŒberschrieben. Und warum solcherlei Verschachteln nicht zu empfehlen ist, möchte ich hier kurz anreißen:

Z. B. Listenpunkte welche mittels HTML farbig mitsamt der Schrift sein sollten, wĂŒrde nicht wirksam. Über HTML ließe sich erst nach dem Listenpunkt, allein die Schriftfarbe anpassen. – Selbiges kann zur Schrift im Tag <strong> oder <b> sein.

Ohne Markup color  fĂŒr die System Fonts erfolgt die Textfarbe vom Theme. Diese sind hiermit konkret visuell. – insofern mĂŒsste die Schriftfarbe color direkt in der style.css geĂ€ndert werden. Nun folgend mein Versuch zur Interpretation. Möchte man ein Wort das mit <strong> oder <b> ausgezeichnet ist oder einem Absatz eine andere Farbe zuweisen, als welche ursprĂŒnglich definiert wurde, also in etwa so:

<strong><span style="color: #ff0000;">Das ist &lt;strong&gt; Text in rot</span></strong>


 ist visuell

Das ist <strong> Text in rot

Anders:

<span style="color: #ff0000;"><strong>Das sollte &lt;strong&gt; Text in rot sein.</strong></span>


 kontrÀr visuell

Das sollte <strong> Text in rot sein.

Google-Webfonts teils deaktivieren

Hier auf meiner Website sind fĂŒr den Titel des Beitrags die Google Webfonts und des anderen die Systemfonts in Anwendung. Nun weiter. Daher kann die Deaktivierung der vom Theme vorgegebene Google Webfont 'Lato' folgen. Hierzu ist es sehr von Vorteil diesen Link im Titel Google-Webfonts fĂŒr WordPress-Standard-Themes ohne Plugin deaktivieren zu folgen. Des selben Autors das Plug-in auf GitHub. Alleinig schon dessen, dass mit dem Snippet die Schriftart fĂŒr sich auszuschließen ist. Hingegen das ĂŒber ein Plug-in wie Autoptimize, s. dort im Tab 5 Extras → Google Fonts, die Google Fonts generell abgeschaltet wĂŒrden.

Die Snippets zur functions.php im Plug-in Code Snippets abspeichern. Dazu ist das zur Verwaltung der Codes als auch der Schutz bei Theme-Update.

CSS fĂŒr F.

CSS Auszeichnungen

Beispiel fĂŒr die Anpassung der Schriftart im Seiteninhalt fĂŒr Seiten und BeitrĂ€ge, Titel und das Drumherum (Header, Seitenleiste, Fußleiste, eingefĂŒgte Widgets) der Website, folgende CSS-Schnipsel:

/* Seiten + BeitrĂ€ge, Schriftart: Seiteninhalt, Titel und das Drumherum  (Header, Seitenleiste, Fußleiste, eingefĂŒgte Widgets)der Website */
.page {
 font-family: 'Helvetica Light', Verdana, sans-serif‚;
}
***

Seiten + BeitrÀge, Seiteninhalt Schriftart:

/* Seiten + BeitrÀge, Seiteninhalt Schriftart */
#content {
 font-family: 'Helvetica Light', Verdana, sans-serif‚;
}

Seiten + BeitrÀge, Titel konkrete Schreibweise (gegenlÀufig Theme):

/* Seiten + BeitrÀge, Titel konkrete Schreibweise */
.site-content .entry-title {
 text-transform: none;
 }
***

Seiten, Seiteninhalt Schriftart:

/* Seiten, Seiteninhalt Schriftart */
.page .entry-content {
 font-family: 'Helvetica Light', Verdana, sans-serif‚;
}

Seiten, Titel Schriftart, SchriftgrĂ¶ĂŸe, Schriftfarbe :

/* Seiten, Titel Schriftart, SchriftgrĂ¶ĂŸe, Schriftfarbe */
.page .page .entry-title {
 font-family: 'Helvetica Light', Verdana, sans-serif‚;
 font-size: 1.8em;
 color: #5f89a1;
}

BeitrĂ€ge, Titel konkrete Schreibweise, SchriftgrĂ¶ĂŸe:

/* Titel BeitrĂ€ge, konkrete Schreibweise (gegenlĂ€ufig Theme), SchriftgrĂ¶ĂŸe */
.single .entry-title {
 text-transform: none;
}

BeitrĂ€ge, Kategorien-Archiv, Titel konkrete Schreibweise, SchriftgrĂ¶ĂŸe:

/* BeitrĂ€ge, Kategorien-Archiv, konkrete Schreibweise (gegenlĂ€ufig Theme), SchriftgrĂ¶ĂŸe */
.archive .entry-title {
 text-transform: none;
 font-size: 28px;
}

BeitrĂ€ge, Schlagwort-Archiv, Titel konkrete Schreibweise, SchriftgrĂ¶ĂŸe:

/* BeitrĂ€ge, Schlagwort-Archiv, konkrete Schreibweise, SchriftgrĂ¶ĂŸe*/
.tag .entry-title {
 text-transform: none;
 font-size: 28px;
 }

BeitrĂ€ge, Suche (Ergebnisse), Titel konkrete Schreibweise, SchriftgrĂ¶ĂŸe:

/* BeitrĂ€ge, Suche (Ergebnisse), Titel konkrete Schreibweise, SchriftgrĂ¶ĂŸe */
.search .entry-title {
 text-transform: none;
 font-size: 28px;
}

Zusammenfassung fĂŒr BeitrĂ€ge, Kategorien-Archiv, Schlagwort-Archiv (Tag), Suche (Ergebnisse), Titel konkrete Schreibweise, SchriftgrĂ¶ĂŸe:

/* Kategorien-Archiv, Schlagwort-Archiv (Tag), Suche (Ergebnisse), Titel konkrete Schreibweise, SchriftgrĂ¶ĂŸe */
.archive .entry-title, .tag .entry-title, .search .entry-title {
 text-transform: none;
 font-size: 28px;
}

Feature (Hervorgehobener Inhalt), Titel Slider und Raster:

/* Feature, Titel Slider und Raster */
.featured-content .entry-title {
 text-transform: none;
}
***

PrimÀre Navigation (Header):

/* PrimÀre Navigation */
.primary-navigation {
 font-family: 'Helvetica Light', Verdana, sans-serif‚;
}

SekundÀre Navigation (linke Seitenleiste):

/* SekundÀre Navigation (linke Seitenleiste) */
#secondary {
 font-family: 'Helvetica Light', Verdana, sans-serif‚;
}

SupplementĂ€re Navigation (Fußleiste):

/* SupplementĂ€re Navigation (Fußleiste) */
#supplementary {
 font-family: 'Helvetica Light', Verdana, sans-serif‚;
}

Drei Navigationen, Zusammenfassung:

/* PrimĂ€re Navigation (Header);SekundĂ€re Naigation (linke Seitenleiste); SupplementĂ€re Navigation (Fußleiste) */
.primary-navigation, #secondary, #supplementary {
 font-family: 'Helvetica Light', Verdana, sans-serif‚;
}

Wie Code sich aufbaut und was zu beachten ist, folgende Hinweise:

CSS font-family – Wahl der Schrift
CSS-Eigenschaften fĂŒr Schrift und Text

Hinweise Schriftarten:

HTML/Tutorials/Google-Fonts

Weitere Hinweise:

cssfontstack.com/Lato (Schriftart Theme Twenty Fourteen)
Pixel, em oder Prozent – Welche Einheit ist fĂŒr SchriftgrĂ¶ĂŸen in CSS am besten geeignet?