I have been looking at some open source fonts for font embedding with @font-face lately. A good place to for good OFL licenced fonts is The League of Movable Type
To be able to test their excellent fonts and how they behave in different browsers I’ve built a little Specimen Browser using Tim Brown’s fantastic Web Font Specimen and some lines of JavaScript.
Just open up the Web Font Specimen Browser in the browser you want to test in and select a font from the drop-down. Without a selection it will default to Georgia and you can test all system fonts too by adding a ‘font’ parameter to the URL like http://marctobiaskunisch.com/WebFontSpecimenBrowser/?font=arial
This is work in progress and my plan is to add more fonts from other sources as well.
Here’s the link to the Web Font Specimen Browser again.
This is great! high five tobs!
Thanks, Tim! Glad you like it!
Bei der »Body Size Comparison« steht grundsätzlich »GEORGIA and Verdana«. Das könntest du noch dynamisch anpassen wie in der Überschrift.
Schriften, die ich noch gerne zum Vergleichen hätte, wären Delicious, die Droid-Familie, Gentium und Heuristica, Justus, Linux Libertine und eventuell die Museo-Familie. Bin mir aber nicht bei allen sicher, ob die Lizenzen eine Einbettung erlauben.
Weitere lohnenswerte Freeware-Schriften portraitiert Gerrit van Aaken z. B. auf http://praegnanz.de/essays/freie-schriften-im-mini-portrait .
Hi Gerhard,
stimmt, das werde ich beim nächsten Update anpassen. Danke für die Fontliste, die Lizenzen werde ich mir mal alle ansehen. Ich glaube Droid, Gentium und Museo sind sehr groß, was die Dateigröße angeht. Vielleicht lohnt es sich aber, die trotzdem mal zu vergleichen.
Es ist gar nicht so einfach, wie ich dachte, gute Open Source Fonts zu finden, die sich für den Einsatz mit @font-face eignen.
tobs
Ich habe herausgefunden, und in meinem Blog auch beschrieben, dass Firefox noch Probleme mit @font-face und Schriftgrößen hat. Das bedeutet, dass beispielsweise sehr dünne Schriftschnitte nur korrekt dargestellt werden, wenn man zusätzlich noch explizit "font-weight: lighter" angibt. Der IE dagegen hat das Problem, dass er sehr dünne Schriften schlecht darstellt, wenn Cleartype im Browser ebenfalls aktiv ist. Da gibt es Techniken, durch Filter ein Cleartype auf das Element zu verhindern. Opera dagegen schert sich nicht um die Angabe und stellt die Schriften weitestgehend richtig dar.