kontur Font-o-Mat

Beschreibung

Wir treiben es „wüld“ mit den Fonts im Gutenberg RichText Editor. Ändere den Font und/oder Größe bei jedem einzelnen Wort oder sogar Buchstaben – wie Du es möchtest! Dieses Plugin ist für die „Font-Lovers“ gemacht. Daher kannst Du bis zu 5 Schriften setzen und sogar CSS-Klassen setzen, denen diese zugewiesen werden sollen. Zudem sind 4 unterschiedliche Schriftstärken und Schriftgrößen einstellbar und dann im Gutenberg-Editor auswählbar.

Take a walk on the wild font side

  • füge bis zu 5 individuelle Schriftarten zu Deinen Blöcken im Editor hinzu (Gutenberg)
  • setze Deine eigenen CSS-Klassen bei denen die Schriftarten erscheinen sollen
  • setze bis zu 4 individuelle Schriftgrößen
  • setze bis zu 4 unterschiedliche Schriftstärken
  • Fonts und Schriftgrößen können auch einem einzelnen Wort ODER sogar Einzelbuchstaben zugewiesen werden!

Schriftfamilie

Ändere die Schriftart für einzelne Wörter, Sätze oder sogar Buchstaben: inline im Gutenberg-Editor.
Dies funktioniert bei den meisten Blöcken automatisch („Absatz-Block“, „Überschrift-Block“…).
Auf der Einstellungsseite kannst Du bis zu 5 Schriftarten aktivieren und ihnen lesefreundliche Namen geben. Und gleichzeitig kannst Du mehrere CSS-Klassen angeben, denen diese Schriftarten zugeordnet werden sollen.
Die Möglichkeit, die Schriftarten zu benennen, kann für die anderen Redakteure auf Deiner Website ziemlich praktisch sein, da diese die Schriftartnamen eher selten kennen, nur dann, wenn sie die meiste Zeit verwendet werden. Du könntest also Deine Überschriften-Schriftart einfach „unsere Überschriften“ o.ä. nennen, um die Arbeit zu erleichtern.

Schriftgröße

Bis zu fünf Schriftgrößen können definiert werden.
Die Schriftgrößen können auch mit einem Anzeigenamen versehen werden, damit es für Redakteure im Gutenberg einfacher wird, diese auszuwählen.

Die Schriftgröße wird prozentual zur Standardschriftgröße berechnet. Wenn Du eine Schriftgrößeneinstellung auf der Einstellungsseite anpasst, wird diese Schriftgröße auf der gesamten Website geändert.

Schriftgrößen können Sätzen, Wörtern oder auch einzelnen Buchstaben inline im Editor zugewiesen werden.

Schriftstärke (Font Weight)

Setze bis zu 4 verschiedene Schriftstärken von 200 bis 900 und gebe den Schriftstärken eigene Namen, um die Verwendung für Redakteure einfacher zu machen. Beispiel: Du könntest die Schriftstärke 900 „supder-duper fett“ nennen. Sei einfach kreativ, es ist Dein Backend!

Demo

Want to play around with it?
Check the
Demo on WordPress Playground

Du willst mehr?
Dann beteilige Dich doch und schicke uns Deine Ideen. Via email oder auf der WordPress Support-Seite 🙂

Deinstallation

Dieses Plugin räumt nach sich selbst auf. Alle Plugin-Einstellungen werden aus Deiner Datenbank entfernt, wenn das Plugin über die Plugin-Seite deinstalliert wird.

Screenshots

  • Gutenberg Editor mit aktiviertem Plugin
  • Ansicht der Einstellungsseite
  • Seitenansicht mit individuellen Schriften
  • Beispielansicht mit "wülden" Schriftarten- und Schriftgrößen-Einstellungen
  • Settings-Seite: Setzen unserer Schriftarten
  • Settings-Seite: Setzen unserer Schriftstärken
  • Settings-Seite: Setze bis zu 5 Schriften
  • Gutenberg: Schriftgröße und Schriftstärke zum Auswählen. Beide mit individueller Benennung.
  • Gutenberg: Wähle ein Schriftart - mit Deiner eigenen Bezeichnung - um diese zu einem Wort oder Wörtern oder sogar einzelnen Buchstaben hinzuzufügen

Installation

Dieser Abschnitt beschreibt, wie man das Plugin installiert und zum Laufen bringt.

  1. Upload kontur-font-mat to the /wp-content/plugins/ directory

  2. Aktiviere das Plugin über das „Plugin-Menü“ in WordPress

  3. Gehe im WordPress Admin > Einstellungen > kontur Font-o-Mat und passe Deine Settings an

Weitere Infos über die Installation von WP-Plugins (engl.)

FAQ

Wo finde ich die Einstellungen?

Under WordPress Admin > Settings kontur > kontur Font-o-Mat or click the link ‚Settings‘ under the plugin in your WordPress Admin Plugins section.

Wie viele Fonts kann ich hinzufügen?

Wir unterstützen derzeit die Einrichtung und Verwendung von bis zu fünf Schriftfamilien. Bisher haben wir aber auch noch niemanden getroffen, der mehr unterschiedliche Schriftarten verwenden wollen würde. ABER schreibt uns, wenn Ihr weitere Schriftfamilien benötigt und wir werden in der nächsten Version weitere hinzufügen.

Wie setze ich meine Schriftfamilien (CSS font-family)?

Füge in das Feld Dein CSS ein. ABER ohne „font-family:“ davor, bitte nur den Wert eintragen, der für die „font-family“ verwendet werden soll. Wenn Du beispielsweise „Open Sans“ aktivieren und verwenden möchtest, müsstest Du nur 'Open Sans', sans-serif eingeben.
Aus Sicherheitsgründen haben wir die gesamte CSS-Zeile deaktiviert, aber das erleichtert auch das Tippen.

Was bedeutet „Zeig mal Klasse „? Wie kann ich erzwingen, dass die Schriftart an mein Theme-CSS oder andere CSS-Klassen angehängt wird?

Du kannst die Schriftarten auch für andere Elemente auf Deiner Seite festlegen. Wenn Du also möchtest, daß eine Schriftart z. bei allen „h1.deineCSSklasse“-Headlines erscheint, dann trage einfach
„h1.deineCSSklasse“ in das Feld ein und die Schrift wird bei allen „h1.deineCSSklasse“-Elementen auf Deiner Seite angezeigt.

Trage Dein CSS in das Feld ein. ABER ohne das „font-family:“. Wir haben die vollständige Zeile der CSS-Funktion aus Sicherheitsgründen deaktiviert. Also mußt Du lediglich 'Open Sans', sans-serif;' einfügen, wenn Du die Schrift Open Sans aktivieren möchtest.

Wie füge ich meine Adobe oder Google-Fonts hinzu?

Hinweis: Dieses Plugin ist ursprünglich nicht wirklich in erster Linie zum Einbinden externer Schriftarten gedacht, wir haben dies nur eingefügt, weil jemand danach gefragt hatte. Das Plugin überprüft nicht, ob die Schriftart nicht schon geladen wurde, verwende dies also bitte nur, wenn Du sicher bist, daß die Schriftart wirklich noch nicht geladen wird.

Du kannst aber beispielsweise bei „Adobe Fonts“ kurz ein Paket mit mehreren Schriftarten anlegen und dann einfach den Link einfügen. Und danach die einzelnen Schriftarten aktivieren. Diese Schriftarten erscheinen dann auf Deiner Website, aber auch im Gutenberg-Editor im Backend.

Füge einfach die URL ein
Bei Google Fonts – zum Beispiel – findest Du das unter „Use on the web“ unter „@import.
Aber nur die URL und NICHT den ganzen Code. Heißt für beispielsweise für die Schriftart „open sans“ = https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,800;1,400&display=swap
Bei/mit „Adobe-Fonts“ mußt Du nur den Link einfügen und fertig.

Gibt es einen. Premium-Version, die ich kaufen könnte?

Nein. Dies ist ein kostenloses Plugin. Und mit kostenlos meinen wir kostenlos.
Allerdings gibt es auch keinen Pro-Support. Bei möglicherweise auftretenden Problemen, bitte beachten, daß wir versuchen werden diese schnellstmöglich zu beheben. Leider sind wir jedoch nicht 24/7 verfügbar, daher bitten wir um Nachsicht und Geduld.

Habt Ihr noch weitere kostenlose WordPress-Plugins, die ich nutzen könnte

Ja, wir hätten da drei, die Dir gefallen könnten:

  • Keine Admin-Premium-Nags, um den Premium-Version-SPAM zu stoppen UND um Dein eigenes CSS zum WP-Backend hinzuzufügen.
    Funktioniert bisher „out of the box“ für „All in one SEO“ und „Yoast-Seo“.

  • kontur Admin Style Lege Deinen eigenen Admin-Backend-Stil fest. Passe die Farben der Admin-Menüs an. Setze Dein eigenes Logo auf die Anmeldeseite, den Editor und das Backend. UND passe Deine Login-Seite an Deinen „Style“ an..

  • kontur Copy-Code-Button füge Deinen eigenen ‚kontur Copy-Code-Button‘ zu einem beliebigen Code-Block auf Deiner Website hinzu . Durch Anklicken wird der Code in die Zwischenablage kopiert. Funktioniert auch auf mobilen Geräten und dem Standard Gutenberg WP-Code-Block. Legen Deine eigenen Button-Texte, Button-Icons oder Bilder aus der Bibliothek, CSS-Klasse(n), Button-Farbe, Button-Textfarbe und „pre“-Background fest.

Ich brauche etwas anderes. Kann man Euch anheuern?

Jo. Bitte einfach melden per E-Mail mit einer kurzen Beschreibung der Anforderungen und des Budgets für das Projekt, und wir starten gemeinsam etwas neues.

Das ist zwar ein einfaches Plugin, aber ich möchte trotzdem unterstützen

Jo, mach doch! Du kannst entweder über PayPal spenden oder Du läßt eine tolle Bewertung zurück, das motiviert mich mehr als Kaffee, um das Plugin weiterzuentwickeln.

Rezensionen

Für dieses Plugin gibt es keine Rezensionen.

Mitwirkende & Entwickler

„kontur Font-o-Mat“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

„kontur Font-o-Mat“ wurde in 2 Sprachen übersetzt. Danke an die Übersetzerinnen und Übersetzer für ihre Mitwirkung.

Übersetze „kontur Font-o-Mat“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

1.1.2

  • Datum: 03.April 2024
  • Updated/fixed fonts and styles loaded into the Gutenberg editor and block themes
  • Einstellungsseite aktualisiert
  • Readme Datei aktualisiert

1.1.1

  • Datum: 09. März 2023
  • Einstellungsseite aktualisiert
  • Readme Datei aktualisiert
  • Bildschirmfotos hinzugefügt

1.1.0

  • Datum: 23. November 2022
  • Einstellungsseite aktualisiert
  • Optionen für Schriftstärken hinzugefügt.

1.0.1

  • Datum: 08. Januar 2022
  • Erstveröffentlichung des Plugins.