Thoughts on web development and technologies by Peter Gasston
Safari 3.1 introduces web fonts for all
Apple have released Safari 3.1 for Windows and OS X (and Linux using Wine) today, and the feature that really stood out for me was the introduction of web fonts. Website makers have been bound to the same core fonts for years now, so suddenly having a huge palette to choose from is going to make an enormous difference!
Using them is pretty easy. First you have to declare the fonts using the @font-face rule - and, importantly, you have to declare each variant (weight, style, etc) individually by linking to the font file involved. You can’t just link to the directory and let the browser work out the variants. To see what I mean, take a look at this example (using Safari 3.1, of course!) and view the source to see the CSS involved.
The default font face uses the Roman form:
@font-face {
font-family: Delicious;
src: url('/tests/delicious/Delicious-Roman.otf');
}
And the bold weight is declared with the Bold form:
@font-face {
font-family: Delicious;
font-weight: bold;
src: url('/tests/delicious/Delicious-Bold.otf');
}
And so on. If you want to use a complete font family you’ll have to declare every variant of it. But then, you just call the fonts with the font-family declaration, as usual:
h1 { font-family: Delicious, serif; }
Which means it degrades gracefully. Nice!
Of course, now that we have this new tool in our arsenal (for the 5% of people who use Safari!) we must use it responsibly; only use fonts which have a free and open license. I’m using the fabulous Delicious in my example.
Please, please, please let the other browser makers follow suit shortly!
Safari 3.1 pushes CSS3 support forward - CSS3 . Info [March 18th, 2008, 7:08 pm; Permalink]
[…] second is the more exciting to me, and I’ve already written a quick introduction (with example) on my own blog. In a nutshell, you can now embed fonts in your pages to display even to users who […]
Wolf [March 19th, 2008, 11:31 am; Permalink]
The problem is that most freefonts are shit.
What about disallowing direct access to your fonts directory, but allowing your CSS to render the font (access the font directory). You’re not violating any rights then.
Blip [March 19th, 2008, 3:28 pm; Permalink]
So Apple copy? Or innovate? I know you are a true believer.
Let us chant together. Ommmmmmmmmmmmmmmm…
Peter [March 19th, 2008, 3:46 pm; Permalink]
@ Wolf: It would be nice if font makers would license their fonts so we could do that, but until they do we have to use open licensed fonts.
@ Blip: Microsoft have had this technology since IE4! However, theirs was only usable with a special embedded font type. So, Apple are first to market with an open type version. Again, making existing technologies easier. However (once more), this wasn’t their idea; it was suggested back in CSS2.
John [March 19th, 2008, 10:10 pm; Permalink]
Fantastic news. I just tried it and it appears to work beautifully. Thanks for the post.
Lepsza alternatywa w świecie przeglądarek | grezlikowski.pl [March 27th, 2008, 10:17 pm; Permalink]
[…] Apple udostępniło Safari dla systemów Windows. Były co prawda małe problemy z licencją, o czym wspominałem na blogu Pawła Wimmera, ale już jest OK. Warto się przekonać, jak Safari radzi sobie ze specyfikacją CSS3. Szczególnie interesująca jest obsługa font-face. […]
Safari 3.1 - Why Safari pissed me off | t.blog [April 5th, 2008, 2:02 pm; Permalink]
[…] more on @font-face and how it works, check out this @font-font explanation. Filed under browsers, css, design | Share This (Help break Wordpress) Leave a […]