article:
Mockup: Paper Bag Template (PSD)
article:
Elements Design & UI: Flat Admin Panel Template (PSD)

Elements Design & Typography: Free Icon Works (EOT, SVG, TTF, WOFF)

Advertisement

A font is a collection of numbers, symbols, and characters. A font describes a certain typeface, along with other qualities, such as size, spacing, and pitch. - Fonts

In traditional typography, a font is a particular size, weight and style of a typeface. Each font was a matched set of metal type, one piece (called a "sort") for each glyph, and a typeface comprised a range of fonts that shared an overall design. - Font

Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. - Web typography

The advantages of using webfont icons fall into four distinct categories: - How to turn your icons into a web font

  • Suitability: an icon font will be much smaller in file size than a series of images, especially if you have used double-sized images for Retina displays. And once the font has loaded, your icons will render instantly, with no need to download an image.
  • Scalability: an icon font can be set to any size by setting the <code>font-size</code> property in the accompanying CSS. This enables you to experiment with different sizes; whereas, for bitmap images, you would have to output an image file at each size.
  • Flexibility: text effects can easily be applied to your icon, including colors, drop shadows and rollover states.  They will also display well against any color or image background.
  • Compatibility: web fonts are supported by all modern browsers, and legacy browsers, too, even IE 6 and earlier.


Implementation



A special CSS @font-face declaration helps the various browsers select the appropriate font it needs, like this:

@font-face{
    font-family: 'MyWebFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?#iefix') format('embedded-opentype'),
         url('WebFont.woff') format('woff'),
         url('WebFont.ttf') format('truetype'),
         url('WebFont.svg#webfont') format('svg');
}


All you have to do is link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

use, like this:

p { font-family: 'MyWebFont', Arial, sans-serif; }


Preview



Elements Design & Typography: Free Icon Works (EOT, SVG, TTF, WOFF)


Created by icon-works.

Enjoy this freebie and want to show support? Spread the word.

Download, share and enjoy!

Advertisement
Tags: icons, fonts, webfonts, typography, design, html5, css3, interface, numbers, symbols, characters, qualities, size, space, pitch, glyph, web typography, suitability, scalability, flexibility, compatibility, web fonts, browsers, icon font, stylesheet

Leave a Comment

No Comment

© Creative3x Ltd.