Thursday, July 23rd, 2009

Multiple font weights via CSS 3 and more font fun

Category: CSS

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

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

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.

Posted by Dion Almaer at 6:47 am

3.6 rating from 29 votes


Comments feed TrackBack URI

I didn’t realize it when poking around yesterday, but the Typekit guys had just written a nice post the day before on how their service works, and their protection scheme (referrer checking, base64-encoded data URIs, and “segmenting”). Also, see First impressions of Typekit.
Given the “open” web nature, I think it’s interesting to see companies trying to protect assets like fonts online on top of the @font-face standard. There is also a proposal for a .webfont standard, which would include another form of permission-based protection. Will be interesting to see where it all goes.

Comment by Schill — July 23, 2009

I wrote about a similar way to protect fonts a while back, talking about how you can really only protect against the casual pirate with these kinds of techniques. Someone could easily pirate a file from a server (like a font or an image), even if they don’t posses the necessary knowledge to get an embedded font to install in the system, if it is encumbered in some way, like being in EOT or SVG format, encoded in a dataURL. That kind of protection is a lot more reasonable for font sellers to ask for, than something like heavy handed DRM. Other forms of content on the internet (video, graphics, music, etc.) posses the same kind of protection since they are generally heavily edited and compressed before they are used.

Comment by CaptainN — July 24, 2009

Leave a comment

You must be logged in to post a comment.