Schrift:
Google Fonts; System Fonts; div. CSS

Die aktuelle Auszeichnung dieser Websites, „Titel in Handschrift“, welche hier Google Fonts darstellt und des anderen sind Systemfonts in Anwendung. Vom Theme her wĂ€re die Schriftart Lato vorgegeben, welches ebenso „Google Fonts“ sind.

Plug-in

Anmerkuung: 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.

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 ausgewĂ€hlten Schriftart in eine Webseite einzubetten, diesen 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 --- */

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

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?

Ist der Beitrag hilfreich?