The great world of Web-Fonts

December 5, 2011 in Web Design, Web Development

Commercial fonts or free fonts?, when saving money is a factor, webfonts make it easy to decide between beautiful but expensive fonts such as Helvetica or Futura and free fonts like the ones featured on Google Web Fonts, which also have a really nice design but will never be like the originals. Also, check out Font Squirrel for more webfonts.   The @font-face feature from CSS3 allows us to use custom typefaces on the web in an accessible, manipulable, and scalable way. But, you might say, “Why would we use @font-face if we have Cufon, sIFR, and using text in images?” A few benefits of leveraging @font-face for custom fonts:
  • Full searchability by Find (ctrl-F)
  • Accessibility to assistive technologies like screen readers
  • Text is translatable, through in-browser translation or translation services
  • CSS has full ability to tweak the typographical display: line-heightletter-spacing,text-shadowtext-align, and selectors like ::first-letter and ::first-line
Webfonts deliver quite a bit of freedom to designers and giving us a lot more flexibility. For now, you can feel confident implementing this part of CSS3 as it covers 98% of deployed browsers. Enjoy!