Categories
Web Design

Online Typography (@font-face)

I love lynda.com training videos that cover an array of topics in web development. When I last logged in I came across a new video series called “Web Fonts First Look” by James Williamson. I thought this series was incredibly helpful and learned a lot more about typography for the web than I think I could have from 1 or 2 books on the subject.

Throughout the video tutorial, James Williamson works on a project called Alice in Web Fonts to demonstrate various techniques in web typography. He demonstrates with a few other fonts but one in particular called JUNCTION which I thought looked really nice! (Must consider using it in a project at a later date!)

Below are some of the notes I took as well as a lot of the resources mentioned from the video lessons.

These are the core controls with text in CSS that have these following properties:
font-family, font-size, line-height, color, font-weight, font-style, font-variant, text-transform, text-align, text-indent, width, letter-spacing, word-spacing

These are generic declarations that can appear in the font-stack if one does not exist:
serif, sans-serif, monospace, cursive, fantasy

There are a couple of resource sites to acquire information to target machines that already have fonts pre-installed and they are as follows:

@font-face rules
There are rules for how to setup your fonts in your code and a great place to find out how that should be structured can be read here: “W3C CSS Fonts Module Level 3”

Step 1: Declare a font family by name.
Step 2: Embedded Open Type (.eot) font needs to appear first for IE to render right.
Step 3: Provide an absolute, relative, or local source reference to the font. (However a ‘local’ reference seems to be deprecated now because mobile devices such as the Droid will cause problems with the page loading.)

This is an example of @font-face construction for fonts that will be saved and served up from your own web server.

@font-face {
font-family: 'MyWebFont';
src: url('../_fonts/webfont.eot'); /* IE9 Compat Modes */
src: url('../_fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('../_fonts/webfont.woff') format('woff'), /* Modern Browsers */
     url('../_fonts/webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('../_fonts/webfont.otf')  format('opentype'),
     url('../_fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

In the video tutorial there was a discussion that you are limited to listing about 9 @font-face listings from what I can remember. However from my recollection he didn’t discuss how that can be resolved when he said that he would follow-up with that comment. If perhaps anyone knows more about this subject please post a follow-up link.

Check out Ethan’s article for the @font-face post
http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

VENDOR PRE-FIXING
“webkit” is often referring to Safari and Google Chrome browsers
You can optimize a pages CSS output to certain browsers by putting a vendor name before it’s CSS prefix to apply subtle affects. Here is an example of how that can be done:

-webkit-transform: rotate(-10deg); /*Safari, Chrome and mobile platforms*/
-moz-transform: (-10deg); /*Mozilla*/
-o-transform: (-10deg); /*Opera*/
transform: rotate(-10deg); /*a default property*/

Prefixing Services

  • Compass
    Compass is a framework for Sass that, among other things, will automatically handle the process of prefixing your CSS3 properties.
  • Prefix-Free
    A unique JavaScript-based solution that dynamically determines which browser is being used, and then assigns the necessary prefixes to the stylesheet.
  • CSS3 Please
    A nifty service that provides copy-and-paste, cross-browser CSS. Adjust the values according to your needs, and you instantly have a snippet that will correctly target all applicable browsers.

modernizr.com
Modernizr adds classes to the element <html> which allow you to target specific browser functionality in your stylesheet.

SOURCES

For further reading on “Font-Hinting”

WHERE TO GET FONTS!

Affordable Fonts to Purchase Open-Source Fonts
Browser Testing Sources Font Converters Other Web Font Tools

For further inspiration check out the following:

FOLLOW-UP ARTICLES

Video (30 minutes)
Tim Brown – More Perfect Typography

13 replies on “Online Typography (@font-face)”

I seriously knew about almost all of this, but having said that, I still thought it turned out valuable. Nice task!

This is wonderful. It gives pepole a variety of choices to chose from. Not like other sites which have rigid fonts which you have to use. The information you have posted here is not only informative but will be of great use to many online workers.

Thanks for the comment, Erik. Fortunately or unaeltunftory, most average users don’t know their Verdanas from their Arials, much less go uninstalling the system fonts that come with their OSs. Perhaps my sarcasm didn’t come through as clearly (who wouldn’t at least have Arial or Helvetica installed anyway?), but clean is probably the worst descriptor of a typeface that I can think of. The person who defined these font stacks needs to crack a book!

Where does font loading fall iithwn actual web standards? Also, is it reasonable to assume that font loading will, in the very least, never get accepted by IE since there would be obvious concerns about font copyrights/licensing? How is the browser loading the font file? I assume it’s being stored somehow, which I would also assume would make most font creators reluctant to have their fonts used in public sites.

This is a cool tool for webmasters. The only real peblorm i can see besides loading time is when google will erase one of the fonts. This won’t be the case for the next five years at least. But still it is a good thing to consider. Also if you want to avoid this you have the option to download your fonts.

Yeah, just use sans-serif. Let your sites and applications apaepr in whatever sloppy old font Windows decides to use that day –a0or better yet, let your Mac choose Helvetica (which is generally unsuitable as a display font below certain sizes). Design is about control, and if you’re not controlling the user experience you aren’t a designer. I agree that the first screenshot does not look great, but that’s because Gotham Light is too fine to apaepr correctly on low-resolution displays. Gotham Book or heavier work just fine and the technology now exists to use such fonts without reservation. And there I went!

Just want to say your article is as amazing. The clarity in your post is just nice and i can assume you’re an expert on this subject. Well with your permission allow me to grab your feed to keep updated with forthcoming post. Thanks a million and please continue the enjoyable work.

Oro I think you should be able to spcefiy alternative fonts within your CSS to avoid problems if the fonts disappear. But I have a feeling this is going to only grow in popularity so you shouldn’t worry about them being deleted anytime soon.

Amy – nice introduction to using @font-face. I appreciate the abundant list of additional resources on the subject.

I’ve never used font-face due to the cost involved, and of course Google made it simpler with their webfont api. Worth checking out though!

I’ve been surfing on-line more than 3 hours nowadays, but I by no means discovered any fascinating article like yours. It’s pretty price enough for me. Personally, if all webmasters and bloggers made excellent content as you probably did, the net will likely be much more helpful than ever before.|

Spot on with this write-up, I honestly feel this amazing site needs much more attention. I’ll probably be returning to read through more, thanks for the info!

Great information. Lucky me I discovered your website by accident (stumbleupon). I’ve bookmarked it for later!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.