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. fontname-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

Chunkfive

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