Schrift:
Google Fonts; System Fonts; div. CSS

Die aktuelle Auszeichnung dieser Websites, „Titel in Handschrift“, welche hier Google Fonts darstellt und des anderen vom Theme in Schriftart Lato, welches ebenso „Google Fonts“ wären. Up do date sind „System Fonts“ im Spiel.

Google Fonts

Google Fonts

  • Link anklicken.
  • Schrift aussuchen … über Sentence anklicken.
  • Schrift
  • Somit erscheint Family Selected (am Bildschirm unten), nach Aufruf können die Codes zur Einfügung für die header.php und zum CSS-Markup kopiert werden.

Family Selected

Schrift einbetten

Um die ausgewählten Schriftart in eine Webseite einzubetten, diesen Code kopieren und 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).

  • Beispiels dieser Website, für Seiten als auch Beiträgen: Startseite (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 --- */

System Fonts

Informativ fastwp.de

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 hier in Kennzeichnung über Google Fonts in Handschrift), 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:

Um die Überschriften und <b>Text</b> und die Texte/Wörter welche mit <strong> kompakt darzustellen, sollte diesen Falles eigenes Markup, als font-weight:100;, angelegt werden.

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;*/
 }

Verständnis für Schriftgewichtung: font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900 Werte von extra dünn bis extra fett. Vorausgesetzt die installierte Schriftart unterstützt diese Abstufung. S. ebenso Schriftformatierung/font-weight

Für derlei Editierung fungiert unser Customizer (Dashboard / Design / Customizer), um in Vorschau die konvertierende Formation zu finden und definieren.

Anmerkung um Irritieren vorzubehalten

System Fonts im Edit-CSS (Customizer) definiert sind, 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:

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> eintreten.

Ohne Markup color  für die System Fonts erfolgt die Textfarbe vom Theme und hiermit konkret visuell ist. – insofern müsste die Schriftfarbe color direkt in der style.css geändert werden. 

Interpretation des Missfallens: Möchte ein mit <strong> oder <b> ausgezeichnetes Wort oder Absatz eine andere Farbe, als welche ursprünglich definiert wurde – wäre darauf zu achten – dies solcherart anzuwenden:

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

… ist visuell

Das ist <strong> text in rot.

Anders:

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

… konträr visuell

Das sollte <strong> Text in rot sein.

Teils vorhergehende Anpassungen (Übung!)

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
Die WordPress-Theme Dateien im Überblick

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?