Blog 6 - Fonts!

Since the early days of web, fonts have come a long way!  Previously designers were limited to just those fonts installed on their own computer.  As time progressed, designers could download fonts BUT if the user didn't have that font installed...well then that design aesthetic would be moot.

Now there is the CSS Rule @font-face which allows web designers the ability to specificy online fonts to display on their web pages.  This means you can provide your own fonts outside of those just installed on your computer. However, there is still a ways to go.  @Font-face since it can decrease performance time and may use fall-back fonts that have other consequences - such as rendering a text transparently.

But I still love this option. Why? Because there's no other way to render fonts to a user if its not installed on their computer.  Sometimes a client's default browser faults can really diminish the overall look and feel of your website.

Check out this example of a website using @font-face http://craigmod.com/journal/font-face/. It's a bit overboard but you get the idea of what you can do.

What is WOFF? 
Well that's a good question because, I have too, have never heard of it. According to Wikipedia WOFF is, "The Web Open Font Format (WOFF) is a font format for use in web pages. It was developed during 2009^[2] and is now a World Wide Web Consortium (W3C) Recommendation.^[3]

WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints."  

Not helpful I know...so what more can we learn about WOFF. So this Web Open Font Format was developed by Mozilla with Type Supply and a few other organizations, which compresses font data.  This means sites using WOFF use less bandwidth and will load faster.  There are also a number of fonts that vendors were not willing to license elsewhere, so font availability is better for designers.  This file format can be embedded into your web pages and is included in the HTML5 standard. 

I've always had problems with typography in my web design. I'm a true beginner and don't use HTML or CSS much for my job but need to be familiar enough with it to use some standard programs.  I get frustrated when I have this great layout and all these fonts that I'm using but they don't render on my webpages...which ultimately means it doesn't look exactly like I want it to AND I feel like I wasted tons of time looking for fonts which didn't work in the first place.  Maybe WOFF will help with that as I progress in my design.