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.

forecast font - web font

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;

forecast font - web font weather font

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

June 6, 2013. This entry was posted in Web Resources and tagged , , , , . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

Leave a Reply

Your email address will not be published. Required fields are marked *