article:
Elements Design: Material Design - Icons (PNG)
article:
Elements Design & Typography: Weather Icons - Icon WebFont (CSS3, OTF, EOT, SVG, TTF, WOFF)

Elements Design & Typography: Material Design - Icon WebFont (CSS3, OTF, EOT, SVG, TTF, WOFF)

Advertisement

A man who works with his hands is a laborer; a man who works with his hands and his brain is a craftsman; but a man who works with his hands and his brain and his heart is an artist. - Louis Nizer

Typography has always been an important part of good design, branding, and readability and web fonts offer many additional benefits: the text is selectable, searchable, zoomable, and high-DPI friendly.

Material design (codenamed quantum paper) is a design language developed by Google and announced at the Google I/O conference on June 25, 2014. Expanding upon the "card" motifs first seen in Google Now, it is a design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Designer Matías Duarte explained that "unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch." Google states that their new design language is based on paper and ink. - Material design

The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience. - Material design

Implementation


  • You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

  • A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches.

@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');
}


  • link to the stylesheet in your HTML, like this:

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

  • Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

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


Preview


Elements Design & Typography: Material Design - Icon WebFont (CSS3, OTF, EOT, SVG, TTF, WOFF)

and more ...

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

Enjoy Downloading this freebie!

Advertisement
Tags: material design icons, material design webfonts, webfonts, vector icons, google material design, mobile, tablet, desktop, icon design, icons, vector icons

Leave a Comment

No Comment

© Creative3x Ltd.