Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Tool-Tipp

Font Swap tauscht Schriften auf beliebigen Websites aus

Die kostenlose Chrome-Extension „Font Swap for Google Font” tauscht im Live-Betrieb Schriften auf beliebigen Websites aus. (Screenshot: t3n)

Wenn du ganz einfach testen willst, wie dieser oder jener Google Font als Alternative auf deiner neuen Website aussähe, nimm die Chrome-Extension „Font Swap for Google Font”. Die kann das.

Sami El Maameri heißt der freundliche Webentwickler aus Dubai, dem wir die Chrome-Extension „Font Swap for Google Font” zu verdanken haben. El Mameeri setzt dabei auf den Einsatz von React, der derzeit wohl populärsten JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen. Die Extension kann kostenfrei genutzt werden.

Nach der Installation der Extension findest du ein unauffälliges kleines F mit einem Kreis darum als Icon in der kleinen Werkzeugleiste rechts neben dem Feld für die URL-Eingabe. Ein Klick auf dieses Piktogramm öffnet „Font Swap”.

Hot or not? Font Swap auf t3n.de angewendet. (Screenshot: t3n)

Font Swap: Einfach zu nutzen, wenn man die Optionen durchschaut hat

Die Verwendung der Extension ist im Grunde ganz einfach. Zunächst begibst du dich in gewohnter Weise auf die Website, auf der du neue Schriften ausprobieren willst. Einmal dort angekommen, klickst du das bereits erwähnte Icon, woraufhin sich das Programmfenster öffnet.

Ganz oben unter „Apply to” legst du fest, auf welche Selektoren sich deine Font-Auswahl auswirken soll. Dabei kannst du zwischen „All”, „Headers” und „Custom” wählen. Im ersten Falle wirkt sich die zu wählende Schrift auf alle Textteile der offenen Website aus, im zweiten Falle beschränkt sie sich auf die Header-Tags h1 und folgende.

Unter „Custom” definierst du dein eigenes Set an Tags, die durch Font Swap bedient werden. Im eben gezeigten Beispiel fügte ich die Tags p für Absätze, h1 für Überschriften erster Ordnung und h2 für Überschriften zweiter Ordnung hinzu.

Alle weiteren Möglichkeiten der kleinen Extension beziehen sich ausschließlich auf die Fontwahl an sich. Das ist durchaus sinnvoll, denn mit mittlerweile 818 Fonts ist das Portfolio der Google Fonts nicht mehr auf einen Blick zu überschauen. „Font Swap” strukturiert die Vielfalt recht gut.

Zum einen lässt sich die Vorsortierung dahingehend ändern, dass die Schriften nicht mehr rein nach Alphabet angezeigt werden, sondern etwa nach dem Datum des Hinzufügens oder ihrer Popularität. Weiterhin existiert eine eigene Ansicht für Fonts, die als Trending identifiziert wurden.

Sobald du im nächsten Schritt eine Einschränkung der Suchergebnisse nach Kategorien vornimmst, stellst du fest, dass die zuvor gewählte Vorsortierung auch bei einer weiteren Einschränkung der Suchergebnisse erhalten bleibt. Auf diese Weise könntest du etwa die populärsten Fonts der Kategorie „Handwriting” anzeigen lassen.

In meinem Beispiel hatte ich die Zahl der zur Wahl stehenden Schriften so schon auf 126 eingeschränkt. Um noch zielgenauer zu werden, besteht die Möglichkeit, die Ergebnisliste weiter zu vereingen, indem du etwa den Grad der Neigung (Slant), die Weite (Width), die Stärke (Thickness) oder die Zahl der verfügbaren Varianten (# of Styles) zu Kriterien machst.

Font Swap: Die Optionen im Einzelnen. (Screenshot: t3n)

Natürlich könntest du auch per Freitext schlicht nach dem Namen der Schrift suchen, die du für deine Schriftwechselexperimente verwenden willst. Die Anwendung des gewünschten Fonts erfolgt dann ganz einfach per Klick auf den Namen der Schrift oder die entsprechende Vorschau, die sich direkt unter der Fontbezeichnung befindet.

Gefällt dir die Ansicht in der gewählten Form nicht, klickst du auf „Reset Page”, woraufhin die Website wieder so angezeigt wird, wie ihr Designer sie sich vorgestellt hatte. Sämtliche Parameter bleiben aber bestehen, so dass du nach einem Reset immer noch in der voreingestellten Auswahl unterwegs bist und nicht alle Einstellungen erneut vornehmen musst. So hast du schnell alle Optionen durchgetestet.

Anzeige

Font Swap: Nicht dauerhaft aktiviert lassen

„Font Swap for Google Font” solltest du dir auf jeden Fall in deinen Chrome legen und bei Bedarf aktivieren. Dauerhaft aktiviert lassen würde ich die Extension nicht, denn sie bedingt sich die Berechtigung aus, alle Daten auf den von dir besuchten Websites zu lesen und zu ändern. Das ist die maximale Berechtigungsstufe und bedeutet tatsächlich genau das, was du glaubst, dass es bedeutet. Ich empfehle dir daher nicht, mal schnell zu schauen, wie dein Online-Kontoauszug mit einem anderen Google Font aussieht.

Mit Bedacht genutzt, ist die Extension indes eine Bereicherung deines Designer-Werkzeugkastens.

Font Swap bekommst du hier:

Font Swap - for Google Fonts
Entwickler: samirai.io
Preis: Kostenlos

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot