TypeKit and Web Fonts

For the project I currently come across is a very stylished corporation website. The site’s designer intends to use special font-face to empharise the brand feeling. This allows me find out something call TypeKit and Web Fonts.

In early web development period, whenever web designer need to use special font face, they may require people to download and install that particular font to client machine. When CSS turns out to a more widely used pratice for web layout control, we use font-family for assigning the font-face we use. But these techniques not yet help web designer to achieve something they want: the use of special, non-widely adopted font face, to their web product.

TypeKit and Web Fonts come to the place for this purpose, with the evolution of cloud service development. TypeKit and Web Fonts acts as a font provider for online purpose. They work in this way:

  1. Web designer sign up for the online font service
  2. Select font face that provided by TypeKit/Web Fonts and define CSS selector for assign font-face effect
  3. Generate JavaScript Snipplet for the fonts service
  4. Put the snipplet to designated web page so as to provides necessary font resource to the web page the snipplet was adopted. Designated CSS selector will take effect with the web font

Therefore, without explicitly storing the font raw file, no installation step on client side. By this mean, web designer can use their ideal font and client side can enjoy the visual effect without any extra font installation.

TypeKit does not provide as many font as Fonts.com Web Fonts provides. And as a Chinese, what I can observe is that TypeKit does not provide any chinese font-face.

Making good use of this technique can definitely help enhancing web layout while not affecting the site SEO concern, say no longer need to use image replacement to show special font design in some case.

Typekit: http://typekit.com/

Fonts.com Web Fonts: http://webfonts.fonts.com/

Leave a Reply

Your email address will not be published. Required fields are marked *

Please Answer * Time limit is exhausted. Please reload CAPTCHA.