So fügen Sie Ihrer Website in 5 einfachen Schritten Font Squirrel-Schriftarten und -Typen hinzu

Dank Websites wie Font Squirrel können Sie jede Art und jeden Stil von Schriftarten verwenden, die Sie auf einer Website mögen. Früher waren die Optionen auf einige Standard-Web-Schriftarten beschränkt, die jeder nutzen musste. Heute gibt es viel mehr Möglichkeiten. Sie sind nicht mehr auf einige webkompatible Schriftarten beschränkt. Jetzt können Schriftarten im Handumdrehen heruntergeladen werden, indem Sie einfach auf eine Website zugreifen.

Websites wie Font Squirrel mit Zugriff auf Hunderte und Tausende von Artikeln sind sehr beliebt. Der Web-Font-Generator macht es einfacher als je zuvor, Beiträge von Drittanbietern sowie kuratierte Kreationen zu verwenden.

Anstatt Standardschriftarten wie Arial, Calibri und Helvetica Neue zu verwenden, können wir die CSS @ -Schriftartenregel verwenden. Auf diese Weise können wir jede Schriftart verwenden, ohne sie auf den Geräten des Besuchers installieren zu müssen. Dies ist eine hervorragende Option, die dem Website-Designer die freie Meinungsäußerung und dem Benutzer maximale Benutzerfreundlichkeit bietet.

Lesen Sie mehr: Wie man CSS lernt (Smashing Magazine)

Dies hat es extrem einfach gemacht, Font Squirrel und andere von Ihnen ausgewählte Schriftarten zu Ihrer Site hinzuzufügen.

In diesem Tutorial zeigen wir Ihnen, wie Sie Font Squirrel auf Ihrer Website verwenden. Sie können dasselbe Konzept verwenden, um Ihrer Site eine beliebige Schriftart hinzuzufügen, einschließlich FontAwesome. 

Fügen Sie Ihrer Website Font Squirrel hinzu

1. Suchen Sie die gewünschte FontSquirrel-Schriftart

• Besuchen Sie Schriftart Eichhörnchen und wählen Sie Suchen, um nach der Schriftart zu suchen, die Sie hinzufügen möchten.
• Wählen Sie die aus, die Sie als Teil Ihres Webdesigns auf Ihrer Website verwenden möchten. Sie können die verschiedenen Kategorien verwenden, um die Schriftart zu finden, die Sie verwenden möchten, und um die beliebtesten, kürzlich hinzugefügten, heißen oder trendigen Ergänzungen zu finden. Es stehen Tausende zur Auswahl. Wählen Sie diejenige aus, die für das Projekt, an dem Sie arbeiten, am besten geeignet ist.

2. Laden Sie das Font Squirrel WebFont-Kit herunter

• Nachdem Sie die gewünschte Schriftart ausgewählt haben, klicken Sie oben rechts auf dem Bildschirm auf die Schaltfläche WebFont Kit.
• Klicken Sie auf Download @ font-face kit.

 Der Download enthält eine Zip-Datei mit einer Reihe von Dateien, einschließlich der Verwendung der Web-Schriftart, aller Lizenzen, die mit dieser Schriftart-Eichhörnchen-Schrift verbunden sind, und natürlich der Datei selbst.

3. Laden Sie die Font Squirrel-Dateien auf Ihre Site hoch

• Datei extrahieren - Sie wird in einen Ordner mit dem Namen des ausgewählten Elements extrahiert.
• Laden Sie ALLE Dateien in den CSS-Ordner Ihrer Website hoch. Sie haben eine Reihe von Dateien, die Sie hochladen müssen, darunter:

1. fontname-webfont.eot,
2. fontname-webfont.svg,
3. schriftname-webfont.ttf,
4. fontname-webfont.woff,
5. stylesheet.css

4. Fügen Sie die Schriftart Ihrem CSS-Stylesheet hinzu

Der letzte Schritt hängt ein wenig davon ab, wie Schriftarten auf Ihrer Website verwendet werden. Sie finden Ihre Schriftdefinitionen in der CSS-Datei. Die Datei sollte aufgerufen werden stylesheet.css. Sie sollten die auf Ihrer Site verwendete CSS-Datei finden und die Font Squirrel-Dateien dort wie folgt hinzufügen. Fügen Sie Ihrer Datei stylesheet.css Folgendes hinzu und ersetzen Sie:

@font-face {
    font-family: 'FontName';
    src: url('FontName-webfont..eot');
    src: url('FontName-webfont..eot?#iefix') format('embedded-opentype'),
        url('FontName-webfont.woff') format('woff'),
        url('FontName-webfont.ttf') format('truetype'),
        url('FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

Wenn Sie die Schriftarten in den Ordner TYPES hochgeladen haben, ändert sich der Code geringfügig in:

@font-face {
    font-family: 'FontName';
    src: url('types/FontName.eot');
    src: url('types/FontName.eot?#iefix') format('embedded-opentype'),
        url('types/FontName-webfont.woff') format('woff'),
        url('types/FontName-webfont.ttf') format('truetype'),
        url('types/FontName-webfont.svg#FontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

5. Ändern Sie die CSS-Deklarationen, um die hinzugefügten FontSquirrel-Elemente zu verwenden

Nachdem Sie die obigen Deklarationen zum Stylesheet hinzugefügt haben, müssen Sie sie etwas weiter bearbeiten, um die Schrift tatsächlich zu verwenden. Nachdem Sie den obigen Code hinzugefügt haben, müssen Sie das Stylesheet weiter bearbeiten, um die neuen Typen zu verwenden, die Sie hinzugefügt haben.

Ändern Sie dazu die Schriftfamilie in den Namen der von Ihnen ausgewählten Option. Wenn Sie beispielsweise den neuen Typ für Ihre Header verwenden möchten, suchen Sie das CSS des Headers und ändern Sie es entsprechend.

Aktualisieren Sie die CSS-Deklaration mit dem heruntergeladenen FontSquirrel-Namen.

h1,h2,h3,h4,h5,h6 {
    color: #444;
    text-decoration: none;
    font-family: 'FontName', sans-serif;
}

 Natürlich können Sie die Schriftfamilie in jedem CSS-Tag verwenden, das Sie benötigen!

Wenn Sie alle oben genannten Schritte korrekt ausgeführt haben, sollten Sie nach dem erneuten Laden des Stylesheets die neue Font Squirrel-Schriftart haben, die Sie gerade zu Ihrer Website hinzugefügt haben!

Wenn nicht, rufen Sie einfach die Entwicklertools Ihres Browsers auf, um zu überprüfen, ob auf alle Dateien ordnungsgemäß zugegriffen wird. Wenn nicht, überprüfen Sie Ihr CSS erneut, um sicherzustellen, dass Sie den Schriftnamen richtig geschrieben haben.

25 beliebtesten Schriftarten auf Font Squirrel

Wenn Sie Inspiration für eine Schriftart suchen, finden Sie hier die 25 derzeit heißesten Schriftarten auf Font Squirrel.

1. montserrat

Montserrat ist eine moderne städtische Schriftart, die in mehreren Gewichten erhältlich ist. Es funktioniert aus der Nähe und aus der Ferne und könnte im Web gut funktionieren.

https://www.fontsquirrel.com/fonts/montserrat

2. Open Sans

Open Sans sollte keine Einführung benötigen. Es ist eine der beliebtesten Schriftarten der Welt und sauber, modern und flexibel.

https://www.fontsquirrel.com/fonts/open-sans

3. Roboto

Roboto ist dank seiner klaren Linien, seines schnörkellosen Erscheinungsbilds und seiner Flexibilität eine weitere äußerst beliebte Web-Schriftart.

https://www.fontsquirrel.com/fonts/roboto

4. Raleway

Raleway ähnelt Roboto, ist aber auch einzigartig. Eine weitere saubere und leichte Schrift, die in jeder Situation gut funktioniert.

https://www.fontsquirrel.com/fonts/raleway

5. Lato

Lato ist dank seiner Effektivität, seines modernen Erscheinungsbilds und seiner hervorragenden Ausgewogenheit fast 10 Jahre alt.

https://www.fontsquirrel.com/fonts/lato

6. Bebas Neue

Bebas Neue ist eine Interpretation der originalen kostenlosen Bebas Neue-Schrift von Ryoichi Tsunekawa. Es ist eine sehr attraktive Schriftart, die sehr beliebt ist.

https://www.fontsquirrel.com/fonts/bebas-neue

7. Poppins

Poppins ist eine leichte und sorglose Schriftart mit hervorragender Ausgewogenheit. Es ist auch durch und durch modern, was bedeutet, dass es in vielen Designs funktionieren kann.

https://www.fontsquirrel.com/fonts/poppins

8. Großartige Stimmung

Great Vibes ist eine fließende Handschrift, die auf verschiedenen Bildschirmgrößen noch lesbar ist. Dies eignet sich gut für hochwertige Designs.

https://www.fontsquirrel.com/fonts/great-vibes

9. Alex Pinsel

Alex Brush ist ein weiteres fließendes handgeschriebenes Pinsel-Skript, das auf verschiedenen Bildschirmgrößen lesbar ist. Es ist eine entspanntere Sicht auf das Thema mit definitiver Anziehungskraft.

https://www.fontsquirrel.com/fonts/alex-brush

10. Treibsand

Treibsand ist leicht und launisch und fühlt sich luftig an. Die Schrift ist eine Mischung aus modern und skurril und eignet sich ideal für eine Reihe von Webdesigns.

https://www.fontsquirrel.com/fonts/quicksand

11. Oswald

Oswald ist eine schwerere, nachdrücklichere Schrift, die in verschiedenen Entfernungen gut lesbar ist. Es ist auch schnörkellos und modern, was gut funktioniert.

https://www.fontsquirrel.com/fonts/oswald

12. Quelle ohne Pro

Source Sans Pro ist eine Weiterentwicklung einer der ersten Open Source-Schriftarten von Adobe. Es wurde stetig modifiziert und verbessert, wobei dies eines der besten Beispiele ist.

https://www.fontsquirrel.com/fonts/source-sans-pro

13. Playfair-Anzeige

Playfair Display ist eine traditionellere Schriftart mit einem modernen Touch. Es ist gut ausbalanciert und kann in allen möglichen Situationen funktionieren.

https://www.fontsquirrel.com/fonts/playfair-display

14. Milchshake

Milkshake ist eine schwerere Schrift mit einem amerikanischen Thema. Es wurde zunächst mit einem Pinsel skizziert, bevor es in eine Schrift umgewandelt wurde.

https://www.fontsquirrel.com/fonts/milkshake

15. Kaushan-Schrift

Kaushan Script hat ein asiatisches Element, das Visionen von Saigon in den 1930er Jahren hervorruft. Es ist eine schöne Schrift mit großer Anziehungskraft.

https://www.fontsquirrel.com/fonts/kaushan-script

16. Chunkfive

Chunkfive ist ein beschreibender Name für diese klobige Schriftart. Es ist eine fette Schrift, die Wirkung zeigt und sich gut für Überschriften oder Überschriften eignet.

https://www.fontsquirrel.com/fonts/chunkfive

17. Amatic

Amatic erinnert an Tafelschreiben oder Die Simpsons, hat aber einen ganz eigenen Charakter. Es könnte gut klappen less formelle Webseiten.

https://www.fontsquirrel.com/fonts/amatic

18. Allura

Allura ist eine weitere fließende handgeschriebene Schrift, die für das Auge sehr angenehm ist. Eine sorgfältige Überlegung könnte diese Schriftart gut gebrauchen.

https://www.fontsquirrel.com/fonts/allura

19. Liga Spartan

League Spartan ist eine No-Nonsense-Schriftart, die viel Präsenz hat. Es könnte perfekt als Überschrift oder innerhalb eines Aufrufs zum Handeln funktionieren.

https://www.fontsquirrel.com/fonts/league-spartan

20. Metropole

Metropolis ist eine moderne geometrische Schriftart, die offensichtlich von einigen der beliebtesten Schriftarten beeinflusst wurde. Dies ist eine großartige Interpretation.

https://www.fontsquirrel.com/fonts/metropolis

21. Pazifik

Pacifico ist eine unbeschwerte, fließende Schrift, die an Pepe-Jeans und das Amerika der 1960er Jahre erinnert. Es ist eine effektive Schriftart in einer historischen Umgebung.

https://www.fontsquirrel.com/fonts/pacifico

22. Aller

Aller ist ein klares, leichtes und modernes Design, dessen angular Erscheinungsbild eignet sich gut für modernes Webdesign.

https://www.fontsquirrel.com/fonts/Aller

23. Josefin Sans

Josefin Sans schafft es, Modernität mit Erbe zu verbinden und könnte eine sehr flexible Schriftart in einer Vielzahl von Designs sein.

https://www.fontsquirrel.com/fonts/josefin-sans

24. Black Jack

Black Jack ist eine fließende Schrift mit einem informellen Erscheinungsbild. Es könnte gut in entspannten, komischen oder entspannten Designs funktionieren.

https://www.fontsquirrel.com/fonts/blackjack

25. Hummer

Hummer hat das Aussehen einer Marke, vielleicht New England oder irgendwo am Meer. Eine großartige Schriftart, wenn das Design passt.

https://www.fontsquirrel.com/fonts/Lobster

Häufig gestellte Fragen

Was ist Font Squirrel?

Font Squirrel ist ein Repository für Web-Schriftarten, die von kostenlosen und Open Source-Erstellern stammen. Alle Schriftarten können kostenlos heruntergeladen und verwendet werden, auch kommerziell.

Wie lade ich Web-Schriftarten von Font Squirrel herunter?

Das Herunterladen von Web-Schriftarten von Font Squirrel ist einfach. Identifizieren Sie die Schriftart, die Sie verwenden möchten, und laden Sie die Datei herunter, die die Schriftart enthält. Laden Sie die Dateien auf Ihren Webhost hoch und fügen Sie den Schriftartnamen in Ihre Stylesheet.css ein. Testen Sie anschließend, ob Ihre Schriftart geladen ist.

Was ist derzeit die beliebteste Schriftart?

Die derzeit beliebteste Schriftart ist Helvetica. Laut Wired ist Helvetica die beliebteste Schrift der Welt, obwohl sie 62 Jahre alt ist.

Was ist die trendigste Schriftart?

Abgesehen von Helvetica die trendigsten Schriftarten laut Lifehack Dazu gehören Baskerville, Times, Akzidenz Grotesk, Gotham, Bodoni und Didot.

Über den Autor

Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/

David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.