Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CCA Web Fonts Talk - 2012.10.01

Sean McBride
October 01, 2012

CCA Web Fonts Talk - 2012.10.01

This is a talk I gave at California College of the Arts on 2012.10.01 to a class of design students. I was invited by Kimberly Cullen. We covered some current examples of web fonts in use, the history of typography on the web, how web fonts work, and how type on the web is different than in print. We also did some live examples using several different font services.

Sean McBride

October 01, 2012
Tweet

More Decks by Sean McBride

Other Decks in Design

Transcript

  1. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); font-weight: 400; font-style:

    normal; } @font-face { font-family: 'Awesome Font'; src: url('awesome-font-bold.woff'); font-weight: 700; font-style: normal; } Tuesday, October 2, 12
  2. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 {

    font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
  3. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 {

    font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
  4. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 {

    font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
  5. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.woff'); } h1 {

    font-family: 'Awesome Font', 'Georgia', serif; } Tuesday, October 2, 12
  6. How is type on the web DIFFERENT than type in

    print? Tuesday, October 2, 12
  7. EOT SVG OTF/TTF WOFF IE 5 – IE 9 IE

    9 – Chrome 0.3 Chrome 4 Chrome 5 – Firefox 3.5 Firefox 3.5 Firefox 3.6 – Opera 9 Opera 10 Opera 11.01 – Safari 3.1 Safari 3.1 Safari 5.1 – iOS 1 iOS 4.2 iOS 5 – 3.1 2.2 Chrome Tuesday, October 2, 12
  8. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); /* IE 5-8

    */ src: local(''), /* sneaky trick for IE */ url('awesome-font.woff') format('woff'), /* FF 3.6+, Chrome 5+, IE9 */ url('awesome-font.ttf') format('truetype'), /* Opera, Safari, iOS4.2+ */ url('awesome-font.svg#font') format('svg'); /* iOS <4.1 */ } Tuesday, October 2, 12
  9. @font-face { font-family: 'Awesome Font'; src: url('awesome-font.eot'); /* IE9 Compat

    Modes */ src: url('awesome-font.eot?iefix') format('eot'), /* IE6-IE8 */ url('awesome-font.woff') format('woff'), /* Modern Browsers */ url('awesome-font.ttf') format('truetype'), /* Safari, Android, iOS */ url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */ } Tuesday, October 2, 12
  10. @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf')

    format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } <script src="http://use.typekit.com/xxxxxxx.js"></script> <script>try{Typekit.load();}catch(e){}</script> Tuesday, October 2, 12