19 Apr 08

 

10:56 PM

no comments

A new way to share fonts for @font-face

Get a great inspiration fix from iLoveTypography.com’s interview with Jos Buivenga, one of the great new type designers that offer superb free typefaces. Jos’s work is a result of years of self-taught discipline and passion for type, and I highly recommend his typefaces and his blog any time you are in the mood for something beautiful.
Last year, the web generated a fiery discussion around the revival of @font-face, the nifty css way of including custom fonts in web pages. A List Apart has a great article about how you can use this old thing (@font-face has been around since css2, but no one implemented it, partly due to the copyright issues that it would have generated; or so I remember). Safari 3.1 is the first browser that implements this. The thing works in both the Mac and Windows versions and it looks really amazing.
I was reading Jos’s approach on licensing fonts for use with @font-face. He asks that a link to his website should be put in the css, next to the @import line. I thought of an alternative.

The purpose is to keep control of your font file. I would feel really safe if I choose to keep my fonts on my server, and clients could retrieve them from the same location, using the @font-face css directive. As I followed the discussion below Jos’s blog post, I found out that many people think that, if someone sees the font in use on a website and will want to use it themselves, they would look for the font’s name in the css files. That’s where, the commenteers agree, one should put their copyright notice. If one wants to download the file, they should follow the url of the @import directive to download the font file, which they later upload to their own website and use it in their css.

I think that this link should work in two ways. If one is to access it directly (copy/paste in the address bar), they shouldn’t be permitted to immediately download the file. Rather, a web page should appear that tells them about the author of the typeface and his license requirements. Also, the page should prompt them to include the file in their css using the exact same link.

The second way is when the link is used via @import, a css with the @font-face declaration and copyright notice will appear.

I feel that this approach would yield so much more to the copyright owner of the font file. Rather than people getting his fonts without him even knowing about it, they can visit a special page really easy, and find out about the typeface and its author, and find an easier way to use the font file: they don’t have to ftp the font file - they just link to it.

I have created a php file that serves the font file in these two ways. It has a few variables that you should edit in order to get it working, such as the fonts directory, your copyright notice and the info page to render (or redirect to) when a person accesses the file directly from the address bar.
In order to use it on another web page, you need to write a css directive such as this one:

@import url(http://typeface-author-website.com /font-face.php?name=FontName)

The name parameter is the name of the font file and the name of the typeface itself, name that will be used in the font-family property of the generated @font-face directive. You can set two additional parameters: alts is a comma-separated value of alternatives and defaults to ’sans-serif’; and format is the extension of the font file and defaults to ‘ttf’.
The script falls back to other extensions if it cannot find a file named fontname.ttf (or fontname.yourext). The possible variants are set inside the script and are .ttf and .otf. So, if you have an .otf file, but the client forgets to enter &format=otf, the script will know and select the correct file.

I sincerely hope that someone finds this interesting. There are many advantages to this technique: for one, you instantly become a web font provider. There are some extensions that I’m thinking about. Mainly, there is the possibility to offer rights of usage only to selected domains via an encrypted key. Whoever does not use the .php file together with a correct key, does not have the right to use the typeface. Of course, they still can, just as they can steal any image or text ever published on the web… but at least you’ll know you never allowed it and that you have a cool licensing system.

What do you think? Feel free to download and try the script. You can pay Jos a visit at his foundry, Exljbris and try his free fonts, I’m sure he won’t mind. Just remember to credit him in the css. Any comments very much appreciated, this took a bit of work, you know :)

Posted in scripting, typography on Saturday, April 19th, 2008 10:56 pm

Leave a Reply or here's the trackback