8 kostenlose und vollständige Qualitäts-Fonts zum Einbetten in Websites • Peter Kröner, Webdesigner & Frontendentwickler

8 kostenlose und vollständige Qualitäts-Fonts zum Einbetten in Websites

20. Oktober 2008, 10:39 Uhr 16 Kommentare · Schreiben

Achtung: Dieser Beitrag ist alt.
Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind und es ist auch möglich, dass niemand mehr auf neue Kommentare antwortet.

Mit @font-face kann man Websites eigene Schriftarten verwenden – allerdings aufgrund von restriktiven Lizenzen in der Regel keine Kommerziellen. Und den meisten Freefonts fehlt es an Qualität, Sonderzeichen und Schriftschnitten. Das gilt nicht für die acht Prachtexemplare, die ich hier kurz vorstellen möchte.

Sie haben alle mindestens 4 Schnitte (normal, fett, kursiv und fett kursiv), alle möglichen Zeichen und sehen sogar gut aus. Einige, wie Audimat, sind vielleicht besser in Überschriften als in Fließtext aufgehoben, aber das möge jeder für sich entscheiden.

Charis SIL

Fontin Sans

Linux Libertine

Linux Libertine

DejaVu Sans

DejaVu Serif

Audimat

Delicious

Lido STF

16 Kommentare · Kommentieren · Twittern
Mehr zum Thema: Fonts

2 Backlinks

@font-face oder auch „Wieso wir neue Schriftlizenzen brauchen“ | kreativemonster
[...] (wie immer) die Regel, was in diesem Fall beispielsweise Peter Kröner auf seinem Blog mit acht kostenlosen und vollständigen Fonts, Ralf Herrmann mit einem Beitrag zu weiteren zehn kostenlosen Fonts zur @font-face-Einbettung und [...]
Linkschleuder zum Samstag #3 | mBlog
[...] 8 kostenlose und vollständige Qualitäts-Fonts zum Einbetten in Websites - Peter Kröner Acht ausgezeichnete Fonts, die man zum Einbetten in Webseiten, aber auch für andere Zwecke verwenden kann. [...]

16 Kommentare

Lob, Kritik, Anmerkungen oder Widerspruch? Schreib einen Kommentar!

1

Moritz Gießmann ¶

Geschrieben am 20. Oktober 2008 um 11:10 Uhr

Wow, da sind ja mal einige Perlen dabei! Ein paar davon hab ich schonmal im Smashing Magazine gesehen, aber das tut der Nützlichkeit deines Beitrages keinen Abbruch :-).

Diesen Kommentar zitieren

2

Herr Gabriel ¶

Geschrieben am 20. Oktober 2008 um 11:13 Uhr

Hm, Charis Sil und Fontin Sans kannte ich noch gar nicht, sehen aber durchaus gut aus. Mal antesten.

Diesen Kommentar zitieren

3

Moritz Gießmann ¶

Geschrieben am 20. Oktober 2008 um 11:24 Uhr

So jetzt mahn ich dich ab, weil ich eine ungewünschte E-Mail von deinem Blog bekommen hab, der ach so kommerziell ist :D

Diesen Kommentar zitieren

4

Ralf Herrmann ¶

Geschrieben am 20. Oktober 2008 um 11:28 Uhr

Wobei die gut ausgebauten Fonts leider das Problem haben, mit ganz schön viel Ballast zu kommen. Die vier Schnitte der Charis bringen etwa 5,6 MB auf die Waage, die beim ersten Seitenabruf erstmal herunter geladen werden müssen! Nicht wirklich zu empfehlen.

Ich hoffe sehr, alle Browserhersteller setzen den Unicode-Range-Descriptor um. Dann könnte man die Fonts aufsplitten und dann würde z.B. der kyrillische Bereich des Fonts nur dann herunter geladen, wenn im Text mindestens ein kyrillisches Zeichen vorkommt.

Diesen Kommentar zitieren

5

Peter ¶

Geschrieben am 20. Oktober 2008 um 11:29 Uhr

Zitat Moritz Gießmann ↑:

So jetzt mahn ich dich ab, weil ich eine ungewünschte E-Mail von deinem Blog bekommen hab, der ach so kommerziell ist :D

Das ist nicht witzig.

Diesen Kommentar zitieren

6

Rico Neitzel ¶

Geschrieben am 20. Oktober 2008 um 11:55 Uhr

Zitat Peter ↑:

Zitat Moritz Gießmann ↑:

Das ist nicht witzig.

Für dich nicht :( Das stimmt wohl…

Diesen Kommentar zitieren

7

Martin Weber ¶

Geschrieben am 20. Oktober 2008 um 12:44 Uhr

Hallo Peter, du hast die Vollkorn vergessen! Die ist bei mir auf der Website auch schon seit längerem im Einsatz…

Diesen Kommentar zitieren

8

Peter ¶

Geschrieben am 20. Oktober 2008 um 12:56 Uhr

Zitat Martin Weber ↑:

Hallo Peter, du hast die Vollkorn vergessen! Die ist bei mir auf der Website auch schon seit längerem im Einsatz…

Die Vollkorn ist sehr schick, aber die in obrige Liste passt sie nicht ganz – da fehlen fette und kursive Schnitte. Was nicht heißt, dass man sie nicht verwenden kann, wenn man darauf zu verzichten bereit ist.

Diesen Kommentar zitieren

9

Dieter ¶

Geschrieben am 20. Oktober 2008 um 13:00 Uhr

Sorry mit welchen Browsern soll denn das funktionieren?

Hier der link zu einer Einbauanleitung:

http://www.css3.info/font-face-in-the-wild/

Diesen Kommentar zitieren

10

Peter ¶

Geschrieben am 20. Oktober 2008 um 13:05 Uhr

Zitat Dieter ↑:

Sorry mit welchen Browsern soll denn das funktionieren?

Bereits heute funktioniert das in Safari und bald kommt der Firefox 3.1, der @font-face ebenfalls unterstützt.

Diesen Kommentar zitieren

11

Lukas ¶

Geschrieben am 20. Oktober 2008 um 15:36 Uhr

Immer die selben Schriften die hier ein Blog nach dem anderen Monat für Monat seit mehr als einem Jahr vorstellt. *gähn*

Diesen Kommentar zitieren

12

Klaus ¶

Geschrieben am 20. Oktober 2008 um 15:47 Uhr

Haben die vorgestellten Schriftarten eigentlich auch die deutschen Umlaute?

Klaus

Diesen Kommentar zitieren

13

Peter ¶

Geschrieben am 20. Oktober 2008 um 15:53 Uhr

Zitat Klaus ↑:

Haben die vorgestellten Schriftarten eigentlich auch die deutschen Umlaute?

Klar, alle haben Umlaute und noch viel viel mehr andere Sonderzeichen.

Diesen Kommentar zitieren

14

Moritz ¶

Geschrieben am 21. Oktober 2008 um 09:34 Uhr

Sorry, falls ich vom Thema abgekommen bin. Passt die Anivers nicht auch in die Reihe? Ich weiß nur nicht genau, wies da mit den Lizenzen aussieht.

Diesen Kommentar zitieren

15

Yoram ¶

Geschrieben am 21. Oktober 2008 um 18:18 Uhr

Hmm, was die Lido STF angeht liest sich aber die Lizenz anders:

[…] You can install and use the font software on up to five (5) computers at a single location. […] If you need to download the font software to more than one output device or install it on more than five computers, you are required to purchase additional licenses.

Und auch bei der Delicious/Fontin Sans gibt’s eine (kleine) Einschränkung:

[…] Using this font for a @font-face decleration is allowed,

Aber:

but only if a readable link to my homepage is put on every page where this font is used.

somit müsste man auf jeder Page ein Link zur Jos Buivenga Site anbringen — und nicht z.B. im Colophon oder “Impressum”. Ist meiner Meinung nach etwas zu unpraktisch.

Wenn Du andere Infos hast dann sag bescheid.

Diesen Kommentar zitieren

16

burslar ¶

Geschrieben am 27. August 2009 um 00:48 Uhr

Sorry, falls ich vom Thema abgekommen bin. Passt die Anivers nicht auch in die Reihe? Ich weiß nur nicht genau, wies da mit den Lizenzen aussieht.

Diesen Kommentar zitieren

RSS-Feed für Kommentare zu diesem Beitrag

Kommentar schreiben

Bitte beachten

Mit einem Stern markierte Felder müssen ausgefüllt werden.
Die Frage nach dem Vornamen von Franz Beckenbauer dient der Spamabwehr
Beiträge von Erstkommentatoren werden moderiert, alle anderen sind sofort freigeschaltet.
SEO-Kommentare werden je nach meiner persönlichen Tagesform entweder gelöscht, ihrer URL beraubt oder in Rechnung gestellt.
Zur Formatierung von Text können folgende HTML5-Elemente verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Zusätzlich stehen zur Formatierung und Hervorhebung von Code folgende Tags zur Verfügung: {html}{/html} (HTML), {php}{/php} (PHP), {js}{/js} (Javascript) {css}{/css} (CSS), {code}{/code} (sonstiger Code, keine Hervorhebung)
Damit HTML außerhalb von Code-Tags richtig angezeigt wird, müssen Sonderzeichen maskiert werden (z.B. < zu <, > zu > usw.).

Hallo!

Dies ist das Blog von Peter Kröner, Webworker aus der Nähe von Osnabrück. Hier geht es um alles rund um Webdesign und Webentwicklung.

Follow me!

Kauft mein Buch!

Bei Amazon kaufen

Mehr Infos auf html5-buch.de/

Unterstützt mein Blog!

Wenn dir gefällt was du hier liest, wirf einen Blick auf Flattr und klick‘ die kleinen orangenen Buttons unter den Artikeln an!

Lesenswert