Exploring CSS 3 and more on @font-face

I’ve continued to play with @font-face and have decided that while Typekit is a nice service; it is not worth paying for unless I am getting access to Adobe’s Library or Linotype’s Library. There are a lot of nice fonts on the service but I discovered Font Squirrel which has a number of the same fonts as Typekit and actually has substantially more than the Free membership option of Typekit. All of the fonts in the @font-face section of Font Squirrel are free, but they do warn that you will need to check the license yourself to make sure you can put the fonts on the Web. You will also need to edit your CSS stylesheet to add the fonts you plan on using and generate .eot versions of the fonts if they don’t have them. (Font Squirrel kindly has created a kit which makes all of this easy.) Once that is done you can upload them to your website or blog. I created a font directory in my blog’s theme folder and put the fonts in there. Doing so means you’ll reference the fonts with url(fonts/fontfilename); in your stylesheet. As a result of this I’m now using MgOpen Moderna (Helvetica inspired) for most headings and MgOpen Cosmetica (Optima inspired) for the body. This should be working for Opera, Firefox, Safari, and IE 8 (I generated the .eot files myself).

While playing with @font-face I’ve also looked at some other CSS 3 commands to try out on the site. Currently I’m making use of the rgba command and border-radius command to style block quotes. I did try the -moz-column-count: 2; -webkit-column-count: 2; commands to make post content two-column, but it doesn’t work so well with video. I’m thinking what one would do is make the post content two-column and then have a postfooter that spanned the entire div. So a post would have a containing div with a content div (with column styling) and footer div inside it. You could then use a plugin or custom fields to place the video in the footer. More experimentation is required. I encourage everyone to start to experimenting with CSS 3 and see what it can do.