Mockup: Float Mobile Display Mockup (PSD)
UI: Bootstrap Component UI Kit (PSD)

Typography: Themify Icons (EOT, SVG, TTF, WOFF)


Fonts and typography are critical to good design, branding, and readability, plus they allow the text to be selectable, searchable, zoomable, and high-DPI friendly. In short, we need web fonts, and we need to optimize their delivery and use. In this session we'll survey the latest browser optimizations and APIs, plus share our experience of optimizing Google Web Fonts. - Ilya Grigorik (Google) - Making Web Fonts Fast(er)

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. - Web typography

Webfont technology is becoming more and more popular on the web, with Google Web Fonts as one of the best known providers of free webfont service. But the use case for this technology is still mainly for aesthetic purpose. Non-Latin webfonts are not as popular as Latin script fonts. Google's webfont repository serves a few non-Latin fonts. - Universal Language Selector/WebFonts

Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ pixel-perfect, hand-crafted icons that draw inspiration from Apple iOS 7 - available to the public, 100% FREE! You may use or distribute it for any purpose, whether personal or commercial. This icon set is a must have tool for web designers and developers. - Themify Icons


  • Upload the ‘themify-icons.css’ file and ‘fonts’ folder to your server
  • Add the CSS file into the <head> section of your site: <link href=“" rel="stylesheet">
  • Add the icon markup in your page: <span class="ti-download"></span>

@font-face syntax - From Chris Coyer of css-tricks

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


Typography: Themify Icons (EOT, SVG, TTF, WOFF)

  • Arrows and Direction Icons;
  • Web App Icons;
  • Control Icons;
  • Text Editor Icons;
  • Layout Icons;
  • Brand Icons;

Created by

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

Stay tuned for more great stuff!


Tags: typography, icons, web fonts, webfonts, arrows and direction icons, web app icons, control icons, text editor icons, layout icons, brand icons, fonts, google web fonts

Leave a Comment

No Comment

© Creative3x Ltd.