Oct 5, 2009
16 wonderful free fonts for CSS embedding with @font-face (Live examples)
While there are lots of free, open or just “available for web-embedding” fonts, most of them are ready to display only strict set of “latin-1″ characters. So, I’ve spent little time and found several fonts that have some Unicode support — Cyrillic symbols for rendering Cyrillic content (Ukrainian, Russian, Belorussian, Kazakh etc.). These fonts have GPL, Apache or OpenFont licensing.
So, here they go:
- Serifs: Biolinum, Charis SIL, CMU Concrete, CMU Typewriter Mono, Heuristica, Liberation Serif and Linux Libertine.
- and Sans-serifs: CMU Bright, Droid Sans, Graublau, Liberation Mono, Liberation Sans and M+ typefaces: 1C Light, 1P Regular, 1P Thin and 2P Regular.
Be careful, this page is showing live embedding examples here and now, so you probably should look at this page at my site, because only there fonts are embedded. And notice — these fonts took together near 15MiB.
Also, to see the examples, you should know, that font-embedding (OpenType and TrueType) works in next browsers: Firefox/3.5+, Opera/10+, Safari/3.1+, Google Chrome (Chromium) (how to make Google Chrome display remote fonts with @font-face) — all modrn browsers, except of Internet Explorer — it is able to draw fonts in it’s own format Embedded OpenType. Converting tool from Microsoft is free, but I don’t know yet if there are licensing issues with the convertion, but I’m going to research this. So you’d better catch my RSS.
Rendering issues on different OS and browsers
Different OS — different font rendering. Also, try this page in different browsers to see what’s going on. Moreover, remote fonts are not system-wide fonts, so rendering is really different.
IMHO, best font rendering is MacOS and Safari. Next is going Chrome in Linux, which is slightly better than Firefox and Opera in same Linux. And finally — Windows, where XP is the worst renderer.
In order to see the difference (or see the fonts, if you have Internet Explorer or old version of other browser), I’ve included “Reference Rendering” image near each font. Just click on it and see the difference, probably you use not the best browser, and missing something beautiful in the modern web. The reference pictures are in PNG format and made from this page in Chromium/4.0.220.1 (Developer build 27609) in Ubuntu Linux 9.04 Jaunty.
Biolinum
This font could be interesting, at least for headings, but it’s not very usable in a large amounts of plain texts. Rendering of this font in different OS and browsers are pretty good.
Reference Picture. Licensing: OpenFont License.
Download font for free: http://linuxlibertine.sourceforge.net/
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
Charis SIL Regular
Good serif font for large texts, with easy reading. It’s also suitable for headings. While font supports wide range of Unicode, it has large size of font file — near 1MiB. Font has good rendering in most browsers.
Click to see reference picture. Licensing: OpenFont License.
Download font for free: http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&item_id=CharisSILFont
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
CMU Concrete
The typewriter-like typeface, like CMU Typewriter, but proportional. Good for headings.
Click to see reference picture. Licensing: SIL OpenFont License.
Download font for free: http://canopus.iacp.dvo.ru/~panov/cm-unicode/
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
CMU Bright
Just unstandard sans-serif, with interesting (and only suitable) rendering in Chrome and Safari.
Click to see reference picture. Licensing: SIL OpenFont License.
Download font for free: http://canopus.iacp.dvo.ru/~panov/cm-unicode/
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
CMU Typewriter (Mono)
True typewriter monospaced font, clone of CMU Concrete. I suppose it’s suitable even for console and development environments. But there could be hinting problems on Windows.
Click to see reference picture. Licensing: SIL OpenFont License.
Download font for free: http://canopus.iacp.dvo.ru/~panov/cm-unicode/
Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо. Факт ґринджол: бій псюг вщух, з’їм шче яєць. Єхидна, ґава, їжак ще й шиплячі плазуни бігцем форсують Янцзи.
public void main() {
System.out.println(“У ґазди є ж бо гевеї”);
}
Droid Sans
Font with Android platform origins. IMHO best multi-purpose font, I use it as main system font in OS. Excellent hinting allows font usage in all sizes, excellent Unicode support and moderate size makes this font to be my #1.
Click to see reference picture. Licensing: Apache License.
Download font for free: http://www.silvermail.ch/files/opensource_droid.zip
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
Graublau Web
#1 in webfonts.info web font list. Excellent for headings, but a bit narrow for main text.
Click to see reference picture. Licensing: @font-face.
Download font for free: http://www.fonts.info/
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
Heuristica
Font based on Adobe Utopia, good serif for large texts.
Click to see reference picture. Licensing: OpenFont License.
Download font for free: ftp://ftp.dvo.ru/pub/Font/heuristica/
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
Liberation Mono
Open-Source font that have the same metrics, as Monotype’s Courier New, standart monospaced font on Windows.
Click to see reference picture. Licensing: GPLv2.
Download font for free: https://fedorahosted.org/liberation-fonts
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
Liberation Serif
Open-Source font that have the same metrics, as Monotype’s Times New Roman, standart serif font on Windows.
Click to see reference picture. Licensing: GPLv2.
Download font for free: https://fedorahosted.org/liberation-fonts
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
Liberation sans
Open-Source font that have the same metrics, as Monotype’s Arial, standart serif font on Windows.
Click to see reference picture. Licensing: GPLv2.
Download font for free: https://fedorahosted.org/liberation-fonts
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
Linux Libertine
Interesting serif. Should be good at large sizes, at headings.
Click to see reference picture. Licensing: OpenFont License.
Download font for free: http://linuxlibertine.sourceforge.net/
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
M+ 1C Light
The М+ fonts are the art of fonts. This light sans-serif is good in reading, excellent in heading. I recommend it.
Click to see reference picture. Licensing: Public Domain.
Download font for free: http://mplus-fonts.sourceforge.jp/webfonts/
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
M+ 1P Regular
A bit thicker than previous, but more suitable for main text.
Click to see reference picture. Licensing: Public Domain.
Download font for free: http://mplus-fonts.sourceforge.jp/webfonts/
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
M+ 1P Thin
Superior extra-light font. Just for headings, but it could make your page extra-light.
Click to see reference picture. Licensing: Public Domain.
Download font for free: http://mplus-fonts.sourceforge.jp/webfonts/
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
M+ 2P Regular
М+ 2* fonts has little difference in characters, but still easy recognizable М+.
Click to see reference picture. Licensing: Public Domain.
Download font for free: http://mplus-fonts.sourceforge.jp/webfonts/
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Чуєш їх, доцю, га? Кумедна ж ти, прощайся без ґольфів! Гей, хлопці, не вспію – на ґанку ваша файна їжа знищується бурундучком. Жебракують філософи при ґанку церкви в Гадячі, ще й шатро їхнє п’яне знаємо.
