Forecast Fnt

A web-font for creating multi-layered weather icons


What is Forecast Font?

Forecast Font is a web-font for creating multi-layered weather icons. It was created to enable you to have more control over the look and feel of the icons, rather than only having a single colour or style. Flat, single-colour icons might be what your after and thats cool but with Forecast font you have all the flexibility to colour, style or even animate various parts of the icons. Create something a little different from the norm. Even better they are fully scalable for use on all devices, no need to create cumbersome image sprites or use multiple images to create your weather icons.

  • Mist

  • Sunrise

  • Sunny

  • Sunset

  • Moon

  • Cloudy

  • Drizzle

  • Drizzle, Sunny

  • Drizzle, Night

  • Raining

  • Raining, Sunny

  • Raining, Night

  • Snowing

  • Snowing, Sunny

  • Snowing, Night

  • Showers

  • Showers, Sunny

  • Showers, Night

  • Thunder

  • Thunder, Sunny

  • Thunder, Night

  • Frosty

  • Frosty, Sunny

  • Frosty, Night

  • Hail

  • Hail, Sunny

  • Hail, Night

  • Sleet

  • Sleet, Sunny

  • Sleet, Night

  • Windy

  • Windy, Sunny

  • Windy, Night

  • Windy, Raining

  • Windy, Raining, Sunny

  • Windy, Raining, Night

  • Windy, Snowing

  • Windy, Snowing, Sunny

  • Windy, Snowing, Night

Getting Started…

Implementing Forecast Font is very simple all you need to do first is reference Forecast Font in your css using @font-face and the css included in the download. From there you make sure to correct the paths needed for where you store these files.

 @font-face {
	  font-family: "iconvault";
	  src: url(;
	  src: url( format("embedded-opentype"),
	       url( format("woff"),
	       url( format("truetype"),
	       url( format("svg");
	  font-weight: normal;
	  font-style: normal;

The icon css…

Here are a couple of examples showing how to to use the css to create the single-colour icons and the more complex of the icons with multiple colours.

	/* -----Sun----- */
	.icon-sun::after {
	content: "f113";
	color: rgb(255, 165, 0);
	position: absolute;
	/* -----BaseCloud----- */
	.basecloud {
	font-family: 'iconvault';
	content: 'f105';
	color: rgb(204, 204, 204);
	/* -----Showers----- */
	.icon-showers::before  {
	content: "f104";
	/* -----Sunny----- */
	.icon-sunny::after {
	content: "f101";
	color: rgb(255, 165, 0);
	position: absolute;

The html…

Here you can see how easy it is to incorporate Forecast Font icons into your designs. Below is how you would markup a single-colour Sunny Icon and a multi-layered Sunny with Showers icon.

  • This is a simple Sunny icon.

  • This icon shows Sunny with Showers.

Forecastfont was created to demonstrate the capabilities of using my final year project If you liked this please do check it out, Forecastfont is still an evolving project as is Iconvault. Thanks.


SIL open font license, MIT license for code. No attribution required, but much appreciated.

Get In Touch

This is a forecast fonts restored from that used by some top web design firms.