THIS AREA. HI THERE, I’M VIEWPORT UNITS VIEWPORT UNITS VIEWPORT UNITS webkit gecko trident presto http://caniuse.com/#feat=viewport-units (>= IE"#) VIEWPORT UNITS
THIS AREA. HI THERE, I’M <p> Foo <span class=“amp”>&</span> Bar </p> p { font-family: Elena, serif; } .amp { font-family: Abril Fatface, Baskerville, serif; } Foo & Bar Foo & Bar ENHANCED FALLBACK http://simplebits.com/notebook/2008/08/14/ampersands-2/
THIS AREA. HI THERE, I’M @font-face { font-family: Alef; src: url(AlefNormal.ttf); font-weight: normal; unicode-range: U+!"#-!FF; /* hebrew! */ } /* Use Alef font only for hebrew */ p { font-face: Alef, Times, serif;}
THIS AREA. HI THERE, I’M font-feature- settings font-feature- settings font-feature- settings is pretty awesome. don’t forget your vendor prefixes! font-feature- settings but still https://developer.mozilla.org/en-US/docs/CSS/font-feature-settings http://caniuse.com/#feat=font-feature http://blog.fontdeck.com/post/15777165734/opentype-1
THIS AREA. HI THERE, I’M icon fonts icon fonts icon fonts http://css-tricks.com/examples/IconFont/ http://fico.lensco.be/ http://pictos.cc/font/ http://symbolset.com/ http://icomoon.io/ http://somerandomdude.com/work/iconic/ …may the google be with you. icon fonts
THIS AREA. HI THERE, I’M <span class="icon">p</span> @font-face { font-family: fico; /* reference font files here */ } .icon { font-family: fico; } old browsers
THIS AREA. HI THERE, I’M TOYS TOYS TOYS TOYS lettering.js wrap each letter in a span for styling fittext.js aspect-preserving text resize to fit container