Forecast Font – Web-Font For Creating Multi-Layered Weather Icons

Forecast Font an amazing web-font that lets you create resizable multi-layered weather icons. This web-font is open to endless customisations like changing colours, size, and you even animate the web-fonts. Forecast font is fully scaleable on all devices, no need to worry about responsiveness or the pain in using css sprites.

Getting started with Forecast Font is easy. It used @font-face to reference in the CSS. For an example

@font-face {
	  font-family: "iconvault";
	  src: url("iconvault_forecastfont.eot");
	  src: url("iconvault_forecastfont.eot?#iefix") format("embedded-opentype"),
	       url("iconvault_forecastfont.woff") format("woff"),
	       url("iconvault_forecastfont.ttf") format("truetype"),
	       url("iconvault_forecastfont.svg#iconvault") format("svg");
	  font-weight: normal;
	  font-style: normal;
	}

Icon CSS for creating single coloured icons

	/* -----Sun----- */

	.icon-sun::after {
	content: "\f113";
	color: rgb(255, 165, 0);
	position: absolute;
	
	}

To learn more about the integration, head over to http://forecastfont.iconvau.lt