Multiple font weights via CSS 3 and more font fun

In: web resources

23 Jul 2009

 Powered by Max Banner Ads 

Ilia Draznin has been using CSS3 font face to fake font weights:

The way @font-face works is that whatever font attributes you specify for a @font-face rule, they don’t determine how the font looks but rather when it’s gonna get used. For example if you have the following two rules

CSS:

  1.  
  2. @font-face {
  3.     font-family: newfont;
  4.     src: local(Arial);
  5.     font-weight: 200;
  6. }
  7.  
  8. @font-face {
  9.     font-family: newfont;
  10.     src: local(Calibri);
  11.     font-weight: 300;
  12. }
  13.  

Then if you use the “newfont” font-family with weight 200 it’s going to use Arial, but if you use it with weight 300 it’s going to use Calibri. So we can take advantage of that, and since it uses @font-face we don’t even have to worry if the user’s computer has fonts or not.

We posted on TypeKit recently, and we have another playa Kernest in the “fix friggin type on the Web” game.

And for a final little nugget of font goodness, from @schill:

Typekit looks to include jQuery, loads CSS with base64-encoded data:font/otf URLs for @font-face. “Safer” than a plain open .TTF, I suppose.

Comment Form


 Powered by Max Banner Ads 

About this blog

This blog delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from: CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.

  • Sarah: She may be 18 in age, but in maturity she is a child herself and more than likely uneducated, how ca [...]
  • bedbye: I use the concepts from trig and algebra if I'm doing any work on my house (repairing the deck, [...]
  • G: http://www.engadget.com/contact/comment/ [...]
  • ?: i like to mix it up. any colour will go with dark, or black jeans. then just throw on like a colourf [...]
  • MiddleAgeVet: Generally software ideas are copyrighted and hardware ideas are patented. I would suggest you take [...]

New offer:


 Powered by Max Banner Ads 
Internet MegaMeeting, LLC Microsoft Store LinkShare  Referral  Program Iolo technologies, LLC Artisteer - Web Design Generator FTPress.com (Pearson Education) Mobile Security: Parental Controls and Monitoring Atom Entertainment (formerly AtomShockwave)
.
Web Analytics