Schrift:
Google Fonts; System Fonts; div. 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 die Schriftart Lato vorgegeben, welches ebenso die 'Google Fonts' sind. Geradewegs habe ich mich mal mit den Fonts beschĂ€ftigt. Sofern ist hier des Gebrauchs fĂŒr Google Fonts, Systemfonts und des zugehörigen CSS beschrieben.

Google Fonts

Google Fonts

Google Fonts aussuchen.

  • 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 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).

  • 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 --- */

Plug-in

Mehr oder weniger folgt hier nur eine 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 konnte dies auf die Schnelle wieder hergestellt werden.

System Fonts

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 ĂŒ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. So weit 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 oder auch bspw. ĂŒber Autoptimize (Reiter Extras → Google Fonts, sofern der Einstellung), 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.

Diverses CSS

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
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?

Feedback zum Beitrag