Customer feedback quickly and easily -
Traffic Light Feedback

Posts Tagged ‘@font-face’

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.

Uptime Robot
feed-holder
FeedBurner
  • MailChimp
  • PSD to HTML
  • PSD to HTML
    PSD to HTML
    activeCollab | Project Management

Vivvo CMS - Web Publishing at your Fingertips