Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Performance-Optimierung » Webschriften optimieren: So gehts ganz einfach

Webschriften optimieren: So gehts ganz einfach

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 8 Kommentare
Lesedauer: 3 Minuten
  • von Denis Potschien
  • 7. Juni 2016

Inhaltsverzeichnis

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

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 .woff
ExpiresByType 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)

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.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Logo der Allgäuer Webdesign-Agentur von Thomas Soyter Der informationsdesigner.

Der Informations­designer

Kaufbeuren

promomasters online marketing seo agentur logo für wien, salzburg, zell am see.

PromoMasters Online Marketing

Wien

Logo für Opus Marketing aus Bayreuth. Links zu sehen ist eine schwarze Schachfigur, der schwarzer Turm. Daneben in Großbuchstaben die Buchstaben OPUS.

OPUS Marketing

Bayreuth

dskom GmbH (SEO Profi Berlin)

Berlin

SEO Agentur Hamburg • Die Nr. 1 in Hamburg.

SEO Agentur Hamburg

Hamburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

8 Antworten zu „Webschriften optimieren: So gehts ganz einfach“
— was ist Deine Meinung?

  1. frengiferengi sagt:
    9. Juni 2016 um 22:04 Uhr

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

    Antworten
  2. 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
  3. 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.

      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. 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
  6. 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
  7. ati sagt:
    7. Juni 2016 um 10:38 Uhr

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

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑