Posts Tagged ‘@font-face’

Google Web Fonts is no doubt the most popular free web-fonts service out there.

Adobe has launched an alternative named Adobe Edge Web Fonts where the fonts are served through Typekit.

The service includes the open source fonts in Google Web Fonts and some more.

Adobe Edge Web Fonts

Its usage is pretty straightforward, select the font and you get a .JS file to be included in your web pages. After that, use it as any other font-family in your CSS rules.

Currently, there are ~500 font-families and a documentation exists for details on the usage.

Meteocons is a set of free icons that is focused on a single subject: the weather.

The set contains 40+ items covering most of the weather conditions, new items are added time-by-time and it is offered in many formats:

  • desktop and web-font

This handy icon set is completely free for both personal and commercial projects.


CSS3, Please! is a web-based & simple-yet-effective cross-browser CSS3 rules generator.

As every browser may require different prefixes for the CSS3 properties, this tool makes it so easy by providing them all with an editable & well-commented way where the output can be seen instantly.

Currently, it helps you write the rules for: border-radius, box-shadow, linear-gradients, rotation & @font-face. Some other transforms like skew & scale will be added soon.

For some transforms, that Internet Explorer can support via IE filters, they are mentioned too.

CSS3 Please

Font Squirrel, which was mentioned at WRD before, has been improved so much & presents hundreds of free fonts that can also be used in commercial projects.

Fonts listed are well-categorized with their styles & it is possible to view the most-downloaded ones that generally takes you to the most popular fonts.

Font Squirrel

The @font-face property of CSS3, which enables us to use any font in websites needs some work on fonts as every browser requires different formats:

  • Original TrueType or OpenType Fonts for Firefox 3.5 and Safari
  • EOT fonts for Internet Explorer
  • SVG fonts for Opera, iPhone & Chrome
  • WOFF fonts for Firefox 3.6+

Font Squirrel has ready-to-use @font-face kits for many popular fonts which include everything needed (and some examples). Also, it offers a @font-face generator to upload your fonts & create custom kits.

Web Font Specimen is a project by Tim Brown of Nice Web Type, for seeing how a typeface renders in browsers.

It is simply a well-prepared HTML/CSS setup that displays most important elements like headings, lists, text in different colors/sizes, emphasis of them & more.

Web Font Specimen

The download comes with the Georgia set by default & new typefaces can be configured by updating the CSS file.

Considering every font is becoming a web font with @font-face & web designers will probably be purchasing more fonts, analyzing how the font will be rendered becomes more important.

To see a demo of Web Font Specimen, click here.