Web  Font  Basics    The  following  fonts  are  installed  on  both  Windows  XP  and  Mac  OS  X  Panther  by  Default    

 • Arial    • Arial  Italic    • Arial  Bold    • Arial  Bold  Italic    • Arial  Black    • Comic  Sans  MS    • Comic  Sans  MS  Bold    • Courier  New    • Courier  New  Italic    • Courier  New  Bold    • Courier  New  Bold  Italic    • Georgia    • Georgia  Italic    • Georgia  Bold    • Georgia  Bold  Italic    

 

 • Times  New  Roman    • Times  New  Roman  Italic    • Times  New  Roman  Bold    • Times  New  Roman  Bold  Italic    • Trebuchet  MS    • Trebuchet  MS  Italic    • Trebuchet  MS  Bold    • Trebuchet  MS  Bold  Italic    • Verdana    • Verdana  Italic    • Verdana  Bold    • Verdana  Bold  Italic    • Webdings    

 

   Font  Stack  Make  sure  than  fonts  are  similar  in  appearance  so  that  design  appearance  won't  be  impacted.    Generic  Declarations     serif   sans-­‐serif   monospace   cursive   fantasy  PC   Times  New  

Roman  Georgia  Palatino  

Tahoma  Arial  Verdana  

Courier  New  Lucida  Console  Monaco  

Comic  Sans  Mistral  Bradley  Hand  

Impact  Haettenschweiler  Papyrus  

Mac   Times  Georgia  Baskerville  

Helvetica  Lucida  Grand  Geneva  

Monaco  Courier  Andale  Mono  

Apple  Chancery  Comic  Sans  Zapfino  

Impact  Copperplate  Papyrus

Font-family: <ideal>, <alternative>, <common>, <generic> Font-family: Georgia, "Times New Roman", Times, serif; Note  that  when  a  font  name  is  constructed  from  several  words  –  like  "Times  New  Roman"  or  "Tebuchet  MS",  it  must  be  enclosed  in  quotes  or  it  could  be  ignored.    Developing  a  Font  Stack    http://www.codestyle.org/servlets/FontStack  http://media.24ways.org/2007/17/fontmatrix.html  

Current  Workarounds    Use  images  instead  of  text  

1. Search  engines  can't  index  2. Inaccessible  to  screen  readers  3. If  user  browsing  with  images  turned  off  –  only  ALT  tags  (if  used)  would  be  

visible.    slFR  (Scalable  Inman  Flash  Replacement)  2004  

1. Uses  flash  player  to  serve  up  desired  fonts  2. Uses  javaScript    -­‐  if  flash  player  installed,  loads  flash  in  place  of  font  3. If  user  don't  have  flash  –  will  just  display  as  default  

 Cufón  

1. JavaScript-­‐based  solution  2. Cufón  is  uploaded  to  your  server.  3. Use  the  generator  to  create  a  font.js  file  4. Reference  the  file  when  you  want  to  use  it.  5. Text  is  no  selectable  6. Not  as  effective  with  body  copy  7. Won't  work  with  many  font  licenses  

 Background  Image  Replacement  h1  {  

text-­‐indent:  -­‐1000em;  width:200px;  height:75px;  background:  url(images/diavlo.png);  no-­‐repeat;  

}    The  @font-­‐face  Rule  W3C  Fonts  Module  Level3  http://www.w3.org/TR/css3-­‐webfonts/                        

Web  Fonts  Support       Chrome   Explorer   Firefox   Opera   Safari  @font-­‐face   4+   4+   3.5+   10+   3.1+*  True  Type  (ttf)   4+     3.5+   10+   3.1+*  Open  Type  (otf)   4+     3.5+   10+   3.1+*  SVG  fonts  (svg)   4+       10+   3.1+*  SVGz  fonts  (eot)         10+   3.1+*  Embedded  Open  Type  (eot)     4+        Web  Open  Font  Format  (woff)   6+   9   3.6+      

iPhone/iPad  supports  SVG  with  added  support  for  TTF  as  of  iOS  4.2      Scalable  Vector  Graphics  (SVG)  

• Xml  language  used  to  create  vector  graphics  • SVG  Fonts  are  included  in  the  standard  • SVG  Fonts  are  small  in  size  and  look  consistent  across  browsers  • SVG  Fonts  cannot  contain  hinting  and  are  not  universally  supported  • SVGz  is  a  compressed  format  of  SVG  Fonts  

 Embedded  Open  Type  (EOT)  

• Proprietary  font  format  developed  by  Microsoft  • EOT  is  a  wrapper  that  subsets  and  compressed  True  Type  fonts  • Additional  format  properties  allow  fonts  to  be  bound  to  a  specific  page  • Microsoft  submitted  EOT  to  the  W3C  in  2008,  never  formally  adopted  

 Web  Open  Font  Format  (WOFF)  

• Developed  in  2009  by  Mozilla  and  several  font  foundries  • Adopted  by  the  W3C  as  a  standard  in  2010  • WOFF  is  a  wrapper  that  can  contain  TT,  OTF,  or  OFF  fonts  • Fonts  are  compressed  and  can  be  accompanied  by  xml-­‐based  metadata  • Browsers  have  been  quick  to  adopt  support  for  WOFF  

                         

Font  Rendering  –  Platform  Specific    Font  Rendering  on  the  Mac  

• Macs  use  the  Core  Type  rendering  engine  which  used  subpixel  rendering  • Core  Type  engine  ignores  font  hinting  • Smaller  text  tends  to  look  bolder  and  more  blurry  than  on  other  systems  

 Microsoft  Rendering  Variables  

• Window  systems  can  be  set  to  use  one  of  three  rendering  methods  • Different  versions  of  Windows  use  different  versions  of  ClearType,  Windows'  

subpixel  rendering  engine  • The  newer  version,  DirectWrite,  anti-­‐aliases  along  two  axis,  much  like  the  

Mac  Core  Type  rendering  engine    Microsoft  Font  Rendering  

• Text  rasterization  gives  more  weight  to  the  pixel  grid  • Small  details  may  be  lost,  and  the  weight  of  the  font  is  often  affected  • ClearType  tends  to  render  body  copy  better,  but  headlines  can  be  jagged  • DirectWrite  produces  better  results,  but  is  relatively  new  

 Windows  Version  Rendering  Defaults       Windows  XP   Windows  Vista   Windows  7  ClearType   disabled   enabled   enabled  DirectWrite   N/A   Available*   Available  Non-­‐IE  &  IE  6   GDI**   ClearType**   ClearType**  IE  7   ClearType   ClearType   ClearType  IE  8+   ClearType   ClearType   ClearType  IE  9   DirectWrite   DirectWrite   DirectWrite  In  all  versions,  settings  can  be  changed  by  the  user  to  any  rendering  method  available,  including  no  anti-­‐alias  and  grayscale  anti-­‐alias  *Available  with  update  **  uses  the  system's  current  rendering,  like  to  be  what  is  listed.  GDI  performs  grayscale  anti-­‐aliasing  for  Windows  +  overwrites  the  system  setting  to  ClearWrite,  which  will  then  be  used  by  all  other  browsers  until  changed    Options  for  Controlling  Font  Rendering  

• Choose  fonts  carefully  and  look  for  fonts  designed  for  the  screen  • The  font's  size  and  usage  matters  in  rendering  • Test  fonts  in  multiple  browsers  and  platforms  before  using  them  

Adobe  Browser  Lab:  https://browserlab.adobe.com  Typekit  Browser  Samples  http://typekit.com/libraries/full  

 

   We'll  work  with  two  options:    Linking  to  a  font  service    http://code.google.com/webfonts    Choose  the  font  you'd  like  to  use.    Google  web  fonts  show  you  both  specimen  and  character  views  and  some  basic  information  about  the  font.  

                           

   ADD  Link  REF  to  your  head  tag  (just  below  title)  

<link  href='http://fonts.googleapis.com/css?family=Radley'  rel='stylesheet'  type='text/css'>  

 Add  font-­‐family  where  appropriate  in  style  type.  

h1  {     font-­‐family:  Radley,  arial,  serif;  }    

 Downloading    a  font    

The  League  of  Moveable  Type    http://www.theleagueofmoveabletype.com/  Create  missing  versions  to  meet  our  browser  and  platform  needs    Choose  your  font  and  click  on  it  to  download.  

   

We'll  need  to  create  the  other  versions  (woff,  eot,  etc.)  before  we  can  create  our  @font-­‐face  declaration.    Be  sure  to  read  the  Open  Font  License    to  be  sure  your  use  will  be  in  compliance!  

   

 Font  Squirrel  http://www.fontsquirrel.com  

 Font  Squirrel  is  a  great  resource  for  both  @face-­‐fonts  kits  and  generating  @face-­‐fonts.  

 You'll  need  to  make  sure  that  css  is  optimized  for  cross  browser  compliance.  (Font  Squirrel  will  do  this  for  you!)  Font  Squirrel  can  also  build  a  @font-­‐face  kit  (@font-­‐face  generator)    

     ADD  THE  TTF  VERSION  OF  YOUR  FONT.                                            

     My  Generated  Kit    

       You  can  also  look  through  Font  Squirrel's  set  of  pre-­‐made  kits  and  download.    

 (Downloaded  kit  shown  on  right)    Now  that  you  have  your  font  kits,  you'll  need  to  add  them  to  your  web  page.      

I'll  show  you  two  different  methods.      Note:  In  both  cases  I've  moved  my  fonts  to  a  folder  named  "_fonts".      

   You  can  copy  the  @font-­‐face  code  from  the  generated  CCS  file  (stylesheet.css)  

     You  will  need  to  ADD  to  FOLDER  name  in  order  for  the  fonts  to  work.    @font-­‐face  {     font-­‐family:  'BenthamRegular';     src:  url('_fonts/Bentham-­‐webfont.eot');     src:  local('☺'),  url('_fonts/Bentham-­‐webfont.woff')  format('woff'),  url('_fonts/Bentham-­‐webfont.ttf')  format('truetype'),  url('_fonts/Bentham-­‐webfont.svg#webfontR8SKAqug')  format('svg');     font-­‐weight:  normal;     font-­‐style:  normal;  }    In  the  second  method,  you'll  link  your  page  to  the  EXTERNAL  css  file.    Note:  You  will  need  to  add  the  font  folder  name  as  well.    

 

Linking  the  CSS.    ADD  TO  THE  HEAD  TAG  (under  title)    <link  href="stylesheet.css"  rel="stylesheet"  type="text/css">      

      Make  sure  that  the  following  are  all  in  the  same  folder  or  have  the  same  configuration:    _fonts  (folder)  stylesheet.css  yourFile.html