• Skip to main content
  • Skip to primary sidebar

Playing with Technology

Any sufficiently advanced technology is indistinguishable from magic. ~Arthur C. Clarke

Exploring CSS 3 and more on @font-face

September 11, 2009 by Jon

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.

Share this:

  • Tweet

Filed Under: Geek, Personal, Typography, Web design Tagged With: CSS 3, Digital typography, Font embedding on the Web, Typesetting, Web design

About me

Avatar of Jon Breitenbucher Sometimes I'm an Instructional Technologist and sometimes I'm a Mathematician, but I'm crazy all the time.

Inbound Marketing Certification Badge

Subscribe through an RSS feed reader

News Feed Comments Feed

Or one of the options below:

Subscribe

Genesis Framework for WordPress

Blogroll

  • Blogical Construction
  • Bootstrap Analysis
  • D’Arcy Norman
  • Infocult
  • jill/txt
  • Jim Groom
  • Liberal Education Today
  • Mark Pearson
  • Thoughts and Experiments
  • webbedENVIRONMENTS
  • WPMUtutorials

Interesting sites

  • 9 Rules
  • Inksmith

it blogs

  • instructional technology
  • Matt Gardzina

My Sites

  • Jon Breitenbucher
  • My static site
  • Orthogonal Creations
  • Voices
  • WoW Ravings

Software

  • Textpattern
  • Wordpress
  • WordPress Planet
  • Wordpress.com

Teaching

  • Extreme Teaching

Typography

  • baseline 50
  • disdributed proofreaders
  • fontzone
  • PRINT
  • Project Gutenberg
  • The Terminal

Web design

  • 960 grid
  • A List Apart
  • Blueprint
  • CSS Zen Garden
  • Typogridphy
  • W3 Schools

site cloud

Classroom Conferences Educause Futurism Gaming Geek General Hardware Instructional Technology Interesting sites Multimedia NMC Personal Policy Presentations Site Social Software Software Teaching Typography Web design woodle

Now Playing:

Recently Played:

pages

  • About
  • MU Admin Bar

categories

  • Classroom (rss)
  • Conferences (rss)
  • Educause (rss)
  • Futurism (rss)
  • Gaming (rss)
  • Geek (rss)
  • General (rss)
  • Hardware (rss)
  • Instructional Technology (rss)
  • Interesting sites (rss)
  • Multimedia (rss)
  • NMC (rss)
  • Personal (rss)
  • Policy (rss)
  • Presentations (rss)
  • Site (rss)
  • Social Software (rss)
  • Software (rss)
  • Teaching (rss)
  • Typography (rss)
  • Web design (rss)
  • woodle (rss)

archives

Social network

  • Facebook
  • Linked in
  • Flickr

feed me

  • RSS
  • Atom
  • Comments RSS

Counter

  • 2 currently online
  • 12 maximum concurrent
  • 913166 total visitors

| home |

return to top of page

inspired by a not (that) ugly design modified by jon breitenbucher to use the genesis theme framework by StudioPress and powered by WordPress | Log in |
diigo My Diigo Tags
Green Web Hosting! This site hosted by DreamHost. Use OpenDNS Creative Commons License