# Fonts > Schriften testen und vergleichen: System-Fonts, Google Fonts und eigene Web-Fonts per CSS-URL — mit Specimen, Glyph-Tabelle und Clamp()-Rechner. Source: https://www.jpkc.com/db/tools/fonts/ ## Schriften ausprobieren, bevor du dich festlegst Der [Fonts](https://www.jpkc.com/tools/fonts/)-Tester beantwortet eine Frage, die sich bei jedem Projekt stellt: Wie sieht *diese* Schrift in *meinem* Text wirklich aus — in allen Größen, in allen Schnitten, mit allen Zeichen, die ich brauche? Statt eine Schrift erst einzubauen und dann zu merken, dass die Ziffern unruhig sind oder das Eszett fehlt, prüfst du das vorher: live im Browser, an deinem eigenen Beispieltext. Du wählst eine Schrift aus drei Quellen — den **System-Fonts**, über tausend **Google Fonts** oder einer **eigenen Web-Font** per CSS-URL — klickst auf **Display Font**, und die Vorschau stellt sie sofort dar. Vier Ansichten zeigen dieselbe Schrift aus verschiedenen Blickwinkeln: ein klassisches Schriftmuster über alle Größen, ein editierbares Magazin-Layout, eine vollständige Glyph-Tabelle und ein Rechner für fluide Schriftgrößen. Gedacht ist das Tool für alle, die mit Typografie arbeiten: **Designerinnen und Designer**, die Schriftpaare und Schnitte vergleichen wollen; **Entwicklerinnen und Entwickler**, die vor dem Einbinden die Glyph-Abdeckung und die verfügbaren Gewichte prüfen; und alle, die für ein responsives Layout eine saubere `clamp()`-Schriftgröße brauchen. Alles läuft im Browser, ohne Account und ohne Installation. ## Drei Wege zu einer Schrift Die Oberfläche ist auf Englisch — die Bedienelemente werden hier deshalb mit ihrem Original-Label genannt. - **Base Fonts** — ein Dropdown mit rund 40 System- und Web-Safe-Familien, von generischen Gruppen (`sans-serif`, `serif`, `monospace`, `cursive`) über Klassiker wie Arial, Georgia, Verdana und Times New Roman bis zu modernen System-UI-Stacks (`-apple-system`, `Segoe UI`, `Roboto`, `Ubuntu`). Ideal, um zu sehen, was ohne jeden Web-Font-Download auf den meisten Geräten ohnehin verfügbar ist. - **Google Fonts** — ein Dropdown mit über tausend Schriften aus der Google-Fonts-Bibliothek, jeweils mit Versionsnummer. Wählst du eine aus, lädt die Vorschau sie direkt und schaltet genau die Gewichte und Schnitte frei, die diese Schrift tatsächlich mitbringt. - **Custom CSS File** — ein Feld für die URL eines bereits gehosteten Stylesheets (Google-CSS, Adobe Typekit, Bunny Fonts, eigenes CDN) plus ein Feld **Font Family Name** für den Familiennamen. Damit testest du jede Web-Font, die irgendwo als `@font-face`-Stylesheet liegt. Zu jeder Schrift wählst du über die **Weight / Style**-Leiste einen Schnitt von 100 bis 900, jeweils normal oder kursiv. Wie die drei Quellen, die Schnitt-Auswahl und jede Vorschau im Detail funktionieren, steht im Manual. ## Vier Ansichten derselben Schrift - **Specimen** — das klassische Schriftmuster: ein großes „AaBbCc", das komplette Alphabet mit Ziffern und Satzzeichen sowie eine Tabelle desselben Textes in 20 Größen von 8 bis 96 px. Jede Zeile ist editierbar, du kannst also deinen eigenen Text eintippen. - **Editable Sample Layout** — ein vollständiges Magazin-Layout aus Überschriften, Fließtext, Zitat, Listen und Karten, gerendert in der gewählten Schrift und dank eingebautem Inline-Editor direkt bearbeitbar. So beurteilst du die Schrift im realistischen Lesekontext, nicht nur an einem Musteralphabet. - **Glyphs** — eine Tabelle aller Glyphen von ASCII über die erweiterten lateinischen Zeichen bis zu Sonderzeichen, Strichen, Anführungszeichen und Ligaturen. Hier siehst du auf einen Blick, ob eine Schrift die Umlaute, das Euro-Zeichen oder die Ziffern hat, die dein Projekt braucht. - **Clamp() Calculator** — ein Rechner für fluide Typografie: Du gibst eine Minimal- und Maximalgröße samt Viewport-Bereich ein und bekommst eine fertige `clamp()`-Zeile, die die Schriftgröße sauber zwischen kleinen und großen Bildschirmen interpoliert — inklusive Code-Beispielen für CSS, SCSS und Tailwind. ## Wo die Schriften herkommen — und was das für den Datenschutz heißt Das Tool läuft im Browser, aber zwei Punkte sind für den Datenschutz wichtig: - **Google Fonts werden live von Google geladen.** Sobald du eine Google-Schrift anzeigst, lädt dein Browser deren Stylesheet und Schriftdateien **direkt von Googles Servern** (`fonts.googleapis.com` und `fonts.gstatic.com`). Google sieht dabei deine IP-Adresse — derselbe Vorgang, der das direkte Einbinden von Google Fonts auf Websites DSGVO-relevant macht. Für eine schnelle Vorschau ist das unkritisch; für die Produktion gilt die übliche Empfehlung, Web-Fonts selbst zu hosten. - **Eigene CSS-URLs gehen an ihren Anbieter.** Eine im Feld *Custom CSS File* eingetragene Stylesheet-URL wird ebenfalls direkt aus deinem Browser geladen — der jeweilige Anbieter (Adobe, Bunny, dein CDN) erhält also einen Request. Die Schrift-Liste der Google Fonts wird übrigens serverseitig vorbereitet und zwischengespeichert; nur die eigentlichen Schriftdateien kommen beim Anzeigen direkt von Google. Details dazu stehen im Manual. ## Jetzt ausprobieren **[→ Fonts öffnen](https://www.jpkc.com/tools/fonts/)** — Schrift wählen, *Display Font* klicken, durch die vier Tabs blättern. Ohne Account, kostenlos, direkt im Browser. ## Verwandte JPKCom-Tools - **[Colors](https://www.jpkc.com/db/tools/colors/)** — Farbpalette zum Schriftbild finden: Schrift und Farbe sind das Paar, das den Ton eines Designs setzt. - **[SEO & GEO Analyzer](https://www.jpkc.com/db/tools/seo/)** — prüfen, wie sich eingebundene Web-Fonts auf Ladezeit und render-blockierende Ressourcen auswirken. --- Tiefer geht es auf den Unterseiten: das **[Manual](https://www.jpkc.com/db/tools/fonts/manual/)** mit jeder Quelle, jedem Tab und jeder Option im Detail, **[Beispiele](https://www.jpkc.com/db/tools/fonts/examples/)** aus der Praxis und gesammelte **[Tipps & Tricks](https://www.jpkc.com/db/tools/fonts/tips/)**.