Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
smilies.4-user.de

Schrift:
Fonts von Google + Lokal; Systemfonts; CSS

Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.




Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.




Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info


Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.




Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.





Info echo1 OpenClipart-Vectors-katze-1
Ist der Classic-Editor zu kennen? –
Versäume bitte nicht den Advanced Editor! Blick in die Zukunft: Advanced Editor Tools
Info echo2 OpenClipart-Vectors-katze-2
Classic-Editor – Classic Widgets
"Innovativ und ausgezeichnet!" Hauch von Nostalgie: Classic Widgets
Info echo3 OpenClipart-Vectors-katze-3
Klassischen Editor! – und …
"Advanced Editor Tools" Dauerhaft dynamisch: Advanced Editor Tools
Info echo4 OpenClipart-Vectors-katze-7
… die Welt gehört dem, der sie genießt.
– mit Classic Editor und Advanced Tools! Advanced Editor Tools und Classic Widgets
Info echo5 OpenClipart-Vectors-katze-4
Aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist fabelhaft!" Unverändert exzellent: Advanced Editor Tools
Info echo6 OpenClipart-Vectors-katze-5
Antörnend! – hier zur Lancierung
"Advanced Editor Tools – ist de luxe!" Classic Editor und Advanced Editor Tools
Info echo7 OpenClipart-Vectors-katze-6
Classic Widgets sind innovativ!
"Classic Widgets – sind modern!" Advanced Editor ToolsClassic Widgets
Info echo8 OpenClipart-Vectors-katze-8a
"Werkraum ist Werkraum"
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Frontend ist Frontend!" Classic Editor und Advanced Editor Tools

Auf dieser Website sind verschiedene Schriftarten in Anwendung. Zum Beispiel wird für den Text eine Systemfont verwendet, während der Titel eine Handschrift-Schriftart von Google Fonts eingebunden ist. Es gibt auch einen beschreibenden Abschnitt, der das Einbinden von Google Fonts lokal auf dem Server erklärt. In einem weiteren Abschnitt wird das Thema Systemfonts behandelt

Fonts

Google Fonts

  • Erst mal der Hinweis zu einem von empfohlenen Plug-in Local Google Fonts. Einmal installiert, aktiviert und eingestellt sind die Googlefonts auf dem Server automatisch zu speichern und so auszugeben.

Local Google Fonts

Die Plug-ins laden so oft Google-Fonts: nicht mit Disable Google Fonts!

Disable Google Fonts

Systemfonts

Flying Fonts


Folgendes so Merkzettel von seinerzeit der Erstellung von Systemfonts usw.

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

Nachfragen!
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;
}

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. hierzu im vorhergehenden Tab:
Google Fonts  der Überschrift "Family Selected > Schrift einbetten"! – das ist dann nicht einzutragen bzw. ist dort wieder zu entfernen.

Anfragen zum Google Server blockieren

Die Snippets zur functions.php ab in das Plug-in Code Snippets.
Mit Obhut von Codes! – so bleibt das auch nach Theme-Update.
Oder Child Theme! – zum Beispiel Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

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

Und Childs Theme in der header.php im <head> werden die Fonts vorgeladen:

<link rel="preload" as="font" href="/fonts/swanky-and-moo-moo-v9-latin-regular.woff2" data-wpacu-preload-font="1" crossorigin>
<link rel="preload" as="font" href="/fonts/swanky-and-moo-moo-v9-latin-regular.eot" data-wpacu-preload-font="1" crossorigin>
<link rel="preload" as="font" href="/fonts/swanky-and-moo-moo-v9-latin-regular.woff" data-wpacu-preload-font="1" crossorigin>
<link rel="preload" as="font" href="/fonts/swanky-and-moo-moo-v9-latin-regular.ttf" data-wpacu-preload-font="1" crossorigin>
<link rel="preload" as="font" href="/fonts/swanky-and-moo-moo-v9-latin-regular.svg" data-wpacu-preload-font="1" crossorigin>

Das Vorladen hat sich bewährt, da hiermit die Titel der Beiträge immer gleich sichtbar sind, ohne alternativ Schrift oder blinken.

System F.

System Fonts

Vorab die Info zu einem Plug-in. Die Herangehensweise ist anders mit dem Plug-in System Fonts von Nilo Velez. Das kann man sich ja mal ansehen.


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

fontsVorlage

  • 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) im Beispiel:

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: 400; /*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 ab in das Plug-in Code Snippets.
Mit Obhut von Codes! – so bleibt das auch nach Theme-Update.
Oder Child Theme! – zum Beispiel Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

CSS 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‚;
}

 

wp wegerl.at

 

Nachlesen

Wie Code sich aufbaut und was zu beachten ist

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

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?

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024 Juni