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

Schrift Eichhörnchen

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.

 Finden Sie Fontsquirrel-Schriftarten

 

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.

fontsquirrel herunterladen webfont kit

 

Fontsquirrel 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

 

Schrift Eichhörnchen Upload-Dateien

 

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.

 

Finden Sie die aktuelle Schriftfamilie

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.

 

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

Montserrat

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

Offene Sans

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

Roboto

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

Raleway

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

Lato

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

Bebas Neue

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

Poppins

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

Große Vibes

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

Alex Brush

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

Treibsand

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

Oswald

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

Source Sans Pro

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

Playfair-Anzeige

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

Milchshake

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

Kaushan-Schrift

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

Stück fünf

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

Amatic

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

Allura

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

Liga Spartan

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

Metropole

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

Pacifico

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

Aller

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

Josefin Sans

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

Black Jack

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

Hummer

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.

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
David Attard
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.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns, wenn Sie Probleme im Zusammenhang mit dieser Website haben oder lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...