CSS3 Web Fonts

Last modified on October 14th, 2008

I started messing around with some CSS3 stuff the other day and managed to add a web font to my site. As you can see, the title of every post is now rendered using a non web-safe font (at least if your browser supports CSS3 – right now I believe only Safari does). It’s a bit premature, as many browsers do not support them, but I thought I’d start figuring out the tricks of tomorrow’s trades.

It’s just a bit of CSS magic, along with a true-type font on the server. The browser downloads the TTF and renders the titles using that font. I think it’s a pretty cool new feature, and I am looking forward to when web-fonts are part of a ubiquitous surfing experience.

** On another note, I have to drop my car off at the body shop tomorrow to get the damage to my door repaired. Hopefully they don’t screw it up. It’ll be in the shop for a few days, so they are giving me a courtesy car until it’s fixed.

7 responses to “CSS3 Web Fonts”

  1. Dale Mugford says:

    As long as it doesn’t mean a rise in the use of “Comic Sans” I’m all for it : )

    Along with fonts, we can all hope that CSS transforms and other now infant proprietary exploration become ratified standards adopted by all that allows designers and developers to create incredibly powerful interface choices that don’t cause conflicts as happens with resorting to JS libraries.

  2. Davin says:

    Looks nice Duane, really nice. I too am a fan of adopting these CSS3 techniques and leaving IE6 etc in the dust. It is time to re-empower the designers and CSS3 does a lot to that end – such as rounded corners. Recently I have had the pleasure of completely overhauling the user interface for a CMS and I gleefully used CSS3 rounded corners for the administration screens – browsers that don’t support it simply get square corners, which I think they can live with. They’ll notice that when they switch to FF3 or Safari that everything mysteriously looks better all of a sudden! Nice.

    Anyway, big ups for testing it out. I like seeing this stuff!

  3. Speaking of your car…did you ever get your stereo back?

  4. Tyler says:

    The only issue I see with downloading fonts/type from a website and have the browser use it to automatically render it would be what if it has a virus (yea yea mac’s don’t have viruses ;))

    What about the copyright issues of a particular typeface? Say you have an illegal font and you offer it on your website so that the browser downloads it and then uses it to render your title, wouldn’t that be a violation against the licensing of that particular font (say if it wasn’t a free font)?

    We’re going through Typography in my Graphics Design course and this was something we were talking about, the copyright use of a licensed type/font 🙂

    If your browser could download the font (granted it worked for both windows and mac) that means you could also use it for the body of your site too couldn’t you? Would the browsers load the font file (ttf or whatnot) into the appropriate directory?

  5. Duane Storey says:

    @Kevin – Nope, stereo is still out of commission. The body shop is close to the Mazda dealership, so I’ll probably swing by and ask them where it is.

    @Tyler – Yes, without a doubt, copyright issues (in my mind) is the main hurdle with web fonts. I suspect you’ll see a new generation of open source fonts when the time comes. But in terms of commercial ones, it’s definitely a big unknown right now.

  6. Duane Storey says:

    @Tyler – Also, I don’t think viruses are really an issue. Downloading a font and displaying it is more like downloading a JPG or PNG as opposed to an EXE. I don’t think it’s very risky for that.

  7. Allie says:

    Dale I’d hate to see Comic Sans everywhere too 😉

    I don’t see it on my browser, but darn that would be awesome if we could use whatever fonts on our websites.

    And yep, downloading fonts isn’t risky at all. You can’t store virus information in it like you can with other files.

Leave a Reply

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