Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Content Marketing Agentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Full-Service Agentur
    • Internetagentur
    • Local SEO Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • Performance Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopify Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
  • Beste Agentur finden
    • 3D Animationsagentur
    • Content Marketing Agentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Full-Service Agentur
    • Internetagentur
    • Local SEO Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • Performance Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopify Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Projekt anfragen
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
Projekt anfragen

Dr. Web » Webdesign » Webschriften optimieren: So gehts ganz einfach

Webschriften optimieren: So gehts ganz einfach

  • Aktualisiert am 23. November 2023
  • Denis Potschien von Denis Potschien
  • Webdesign
  • 8 Kommentare

Top Agenturpartner

Werbehinweis-Icon.

wp-agentur.de | WordPress-Agentur

Köln

DRWA Das Rudel

Freiburg im Breisgau

MarvinG

Frankfurt am Main

Internetagentur Grazioli

Langgöns

Webweisend Media

Düsseldorf

SEOfolgreich

München

Alle Agenturpartner

Webschriften sind zweifelsohne eine große Bereicherung für das Webdesign und mittlerweile nicht mehr wegzudenken. Schließlich haben sie die Einheitstypografie mit Verdana und ihren Zeitgenossen beendet. Da Webschriften im Gegensatz zu Systemschriften jedoch heruntergeladen werden müssen, stellen sie natürlich eine zusätzliche Ressource dar, die für zusätzlichen Datentransfer sorgt. Mit den folgenden Tipps wirst du deine Webschriften optimieren und so dafür sorgen, dass deine Seite schneller geladen wird.

Webschriften optimieren

Zeichensatz der Schrift beschränken

Gut ausgebaute Schriften besitzen schon mal mehrere hundert Zeichen. Darin enthalten sind dann etwa sprachspezifische Buchstaben wie deutsche Umlaute und das Eszett – aber auch solche anderer Sprachen. Falls du auf deiner Website ohnehin nur Texte in deutscher Sprache veröffentlichst, solltest du dich auf einen Zeichensatz konzentrieren, der auf alle nicht benötigten Buchstaben verzichtet.

Nutzt du eine Schrift nur in Versalien – zum Beispiel für Überschriften – solltest du Kleinbuchstaben aus dem Zeichensatz streichen. So kommst du zu möglichst kleinen Dateigrößen. Denn gerade im mobilen Internet solltest du auf möglichst kleine Dateigrößen achten.

fontsquirrel_webfont-generator
Webfont-Generator von Fontsquirrel

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

Die meisten Anbieter von Webschriften wie beispielsweise MyFonts bieten einen Webfont-Generator an, mit dem du den Zeichensatz selbst bestimmen kannst. Darin legst du dann beispielsweise fest, welche Sprachen unterstützt werden sollen. Einen frei zugänglichen Webfont-Generator gibt es zudem auf Fontsquirrel. Dort lädst du eine Desktopschrift hoch und generierst die passenden Webschriften in allen gängigen Formaten.

Auch wenn nach wie vor eine Reihe unterschiedlicher Webformate wie EOT und TTF im Einsatz sind, so hat sich das WOFF-Format doch mittlerweile als Standard durchgesetzt. Mit WOFF2 gibt es dazu bereits ein Nachfolgeformat, welches deutlich kleinere Schriftdateien hervorbringt. Du solltest also neben WOFF auch WOFF2 berücksichtigen. Die Browser, die das neue Format bereits unterstützen, können so kleinere Dateien herunterladen.

Webfont-Generatoren wie der von Fontsquirrel unterstützen dieses Format bereits.

Zeichensatz per CSS beschränken

Moderne Browser unterstützen noch eine weitere Möglichkeit, den Zeichensatz einer Schriftdatei einzuschränken – nämlich die CSS-Eigenschaft „unicode-range“. Hiermit definierst du einzelne Zeichen oder Zeichenbereiche einer Schrift. Der Browser lädt dann nur jene Zeichen der Schrift herunter, die innerhalb des vorgegebenen Unicode-Bereiches liegen.

unicode-range: U+0025-00FF;unicode-range: U+4??;unicode-range: U+0025-00FF, U+4??;

Im ersten Beispiel wird ein Unicode-Bereich definiert, der die Codepunkte „U+0025“ bis „U+00FF“ beinhaltet. Im zweiten Beispiel wird eine Wildcard gesetzt. Es werden also alle Zeichen berücksichtigt, deren Codepunkte mit „U+4“ beginnen. Im letzten Beispiel werden die ersten beiden Bereiche miteinander kombiniert.

unicode-range_beispiel
Verwendung der „Lobster“ für den Unicode-Bereich „U+0026“ (kaufmännisches Und)

Leider unterstützen noch nicht alle Browser diese Eigenschaft. Der Internet Explorer und Edge stellen im Browser zwar nur jene Zeichen dar, die im angegebenen Unicode-Bereich liegen, laden aber dennoch den kompletten Zeichensatz herunter.

Schriften komprimieren und cachen

Zuguter letzt besteht serverseitig noch die Möglichkeit, eine Schrift zu komprimieren. Per „.htaccess“ sorgt du beispielsweise dafür, die Schriftdateien per Deflate zu schrumpfen, bevor sie an den Browser geschickt werden. So reduzierst du die Dateigröße während der Übertragung, was die zu übertragene Datenmenge wieder etwas schmälert.

Außerdem solltest du per „.htaccess“ dafür sorgen, dass deine Schriftdateien im Browser zwischengespeichert werden. In der Regel treten ja keine Veränderungen bei Schriftdateien auf, sodass ein durchaus großzügig angelegter Zeitraum für das Caching eingerichtet werden kann.

AddType font/woff .woffExpiresByType font/woff "access plus 1 year"AddOutputFilterByType DEFLATE font/woff

Im Beispiel wird per „ExpiresByType“ dafür gesorgt, dass die Schrift ein Jahr lang im Cache verbleibt und per „AddOutputFilterByType“ wird zusätzlich die Deflate-Komprimierung angewendet.

(dpe)

Wie hilfreich war diese Info?

Gesamtbewertung: 0 / 5. Anzahl Bewertungen: 2 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Lust auf mehr?

Die Bedeutung von Whitespace im Design

Whitespace (Weißraum oder „negativer Raum”) ist der leere Raum zwischen den Elementen einer Seite. Obwohl viele dies als Verschwendung von wertvollem Platz auf dem Bildschirm ansehen, ist der Weißraum ein wesentliches Designelement:

42 CSS Buttons mit Hover-Effekt & Code Snippets

Für schön anzusehende CSS-Buttons benötigt es schon lange keine Grafiken mehr — sie lassen sich formen aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn du an eine umfassende Browser-Kompatibilität denkst. Wie gut, dass es fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir heute die besten Beispiele auch gleich in diesem Beitrag präsentieren.

KI Mobile-first Design in 2023: Hype oder Flop für Designagenturen?

Ende 2022 sorgte die KI-Anwendung ChatGPT für Schlagzeilen. Seither ist KI ein beliebtes Buzzword und löst in der IT-Branche die gesamte Gefühlsskala von Zukunftsängste bis Euphorie aus. Wir bleiben gechillt und schauen uns an, wie Sie als Inhaber einer Designagentur von KI getriebenem Mobile-first Design profitieren. Gibt es auch Schattenseiten und Grenzen? Mal sehen.

8 Antworten

  1. ati sagt:
    7. Juni 2016 um 10:38 Uhr

    Für mich ist das Thema im Moment von grossem Interesse. Vielen Dank!

    Antworten
  2. Mirco Hirschel sagt:
    7. Juni 2016 um 13:10 Uhr

    Besten Dank für den Beitrag,
    hier noch eine hilfreiche Ergänzung für alle, die gerne bis ins letzte Detail optimieren.
    Wer einen sehr umfangreichen Schriftsatz verwendet und sich sicher ist, dass bestimmte Zeichen nicht benötigt werden, kann die Schrift mit dem FF Subsetter etwas “schrumpfen”.

    http://www.subsetter.com/

    Gruß
    Mirco

    Antworten
  3. Franz Meyer sagt:
    7. Juni 2016 um 13:43 Uhr

    Wenn ich eine Schriftart in der CSS hinterlege, dann werden in dieser mehrere Dateiformate hinterlegt. Also wenn ich die Schriftart beispielsweise über den im Artikel erwähnten Generator Erstelle.
    Holt sich der Browser dann eigentlich immer nur eine Datei bzw. ein Dateiformat (zum Beispiel nur WOFF) oder werden alle in der CSS für die Schriftart hinterlegten Dateien geladen?

    Antworten
  4. Torsten sagt:
    7. Juni 2016 um 23:47 Uhr

    WOFF-Dateien sind bereits komprimiert, daher ist eine serverseitige Komprimierung kontraproduktiv und führt eher zu längerer Ladezeit.

    Antworten
  5. Peder Iblher sagt:
    8. Juni 2016 um 10:14 Uhr

    Wie ist es mit der Lizensierung von Schriften, die ich selbst in WOFF/WOFF2 umwandle? Ich denke mal, eine normale Lizenz bildet diese Nutzung nicht ab und das kann Ärger geben …

    Antworten
    1. Denis Potschien sagt:
      8. Juni 2016 um 10:55 Uhr

      Da muss man sich natürlich die jeweiligen Lizenzbedingungen anschauen. Aber bei MyFonts erworbene Webschriften lassen sich mittlerweile auch als WOFF2 herunterladen.

  6. Franz Meyer sagt:
    8. Juni 2016 um 16:06 Uhr

    Werden eigentlich alle möglichen Formate, die in der CSS hinterlegt sind, geladen oder holt sich der Browser nur eine einzige Schriftdatei? Also beispielsweise nur WOFF2, wenn der Browser dieses Format unterstützt?

    Antworten
  7. frengiferengi sagt:
    9. Juni 2016 um 22:04 Uhr

    Vielen Dank für diesen sehr guten Beitrag über Schriften!

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.

Fachmagazin für Online-Marketing. Seit 1997. Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur finden in Ihrer Nähe