Skip to content
November 4, 2010 / dpiddy1

Beautiful web typography using CSS3

This slideshow requires JavaScript.

Web typography is going to be the next big thing and designers across the globe are salivating at the endless possibilities. The slide show above displays a few of the best:

  1. www.designmadeingermany.de
  2. www.iconproducts.com
  3. www.flipoutdesign.com

To see a collection of great webfont sites out there check out www.webfontawards.com.

Had an interesting e-seminar on Tuesday which showed how to introduce custom fonts into your web designs. Personally I think this is awesome and definitely the way to go for the future. Might even be worth switching to this CSS3 style for our website rather than using Sifr (which is flash and harder to edit).

If you want to watch the e-seminar you can click on this link but you’ll have to let me know as it requires my username and password to view it. Watch the recording of this e-seminar!

I’ve included a link to download a zipped folder that includes an example HTML file that when opened in a browser displays a custom font. All this and there’s no messing around with flash and code just simple CSS.
Download the example

There’s basically 5 easy steps to start using awesome custom fonts on a website:

  1. Download a custom font – Two great places to get these for FREE are at www.fontsquirrel.com or Google webfonts
  2. Go to www.fontsquirrel.com and click on the ‘@font-face generator’ button
  3. Click on the ‘Add fonts’ button and locate the font you just downloaded
  4. Once uploaded click on the ‘Download your kit’ button. This is a webfontkit folder for you that has all the different formats required, i.e. eot, svg, ttf and woff.
  5. Then just add the fonts to the same folder as your HTML file and include the appropriate CSS – see the HTML file in the example folder. This will show all the CSS you’ll need.

Either me or Seb will hold a HTML/CSS class on this and go into more detail, but until then have a play and start using your own custom fonts.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: