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:
- fontname-webfont.eot,
- fontname-webfont.svg,
- schriftname-webfont.ttf,
- fontname-webfont.woff,
- 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.
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.