article:
Elements Design & Typography: Material Design - Icon WebFont (CSS3, OTF, EOT, SVG, TTF, WOFF)
article:
Elements Design: Weathera - Simple Vector Weather Icons (AI, PSD)

Elements Design & Typography: Weather Icons - 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.

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. There was no mechanism for individual Web pages to control font display until Netscape introduced the <font> tag in 1995, which was then standardized in the HTML 2 specification. However, the font specified by the tag had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or monospace font, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities. - Web typography

Implement Webfonts





1. Upload your webfonts

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

2. Include the webfont stylesheet

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Using @font-face

We've already gone ahead and generated the code for you. 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" />

3. Modify your own stylesheet

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


Weather Icons - 189 Icon Font inspired by Font Awesome and designed for Bootstrap

Preview


Miscellaneous Weather

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

Night / Moons

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

Day / Sunny

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


and more ...

Created by Erik Flowers.

We would appreciate it if you credit our resources and help us to spread this work and name.

Enjoy Downloading this freebie!

Advertisement
Tags: weather webfonts, webfonts, icon design, typography, moon phases, clocks, beaufort wind scale, wind directions, day, sunny, neutral, cloudy, night, moons, miscellaneous weather

Leave a Comment

No Comment

© Creative3x Ltd.