Web symbols using custom font-face

Usually when building a website or if you work on multiple projects you are always fed up with producing the same set of web elements again and again. By web elements I’m referring to social network icons, gallery arrows or bullets or any other UI element on the page. Besides this, you always have to slice down every icon so it can be faster loaded and to have more “power” over it.

This is when this typeface come up. This was build to save time and let creative people do their thing and build great creative things. Using this typeface you can create custom web symbols and frequently used icons on every project.

Whare are this web symbols created with custom font-face?

Well in big words, it is a vector html-compliant typeface and can be used in any size, color or almost every browser (IE6 not supported, IE7+ yes!). An example of how to used them and how they look you can find bellow. Keep in mind that you have to upload the fonts on your server, so no hot-linking or the fonts will be transformed to Webdings.

@font-face{ 
	font-family: 'WebSymbolsRegular';
	src: url('/fonts/websymbols-regular-webfont.eot');
	src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/websymbols-regular-webfont.woff') format('woff'),
	     url('/fonts/websymbols-regular-webfont.ttf') format('truetype'),
	     url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
	}

Web Symbols using custom Font-Face

View Demo/Download fonts

Related Posts

10 free font-face icon sets worth checking

Leave a Reply