For ages using fonts.com to serve up web-fonts for your websites was tiresome due to the way in which they handled the CSS font-face declarations. Which was a shame as fonts.com web-fonts is home to a number of quality foundries and fonts. The issue was the way in which it handled weight and style declarations. Each weight and style of the same font had to be used in your CSS as a different font-family property name. This resulted in having to construct multiple, fragile selectors and writing CSS in an unfamiliar fashion.

So you’d end up with something like this (note, this is written in SCSS) to “reset” your basic elements. The worst part was adding weight rules to other CSS selectors

p {
	font-family: "Avenir W01 Book";
	em {
		font-family: "Avenir W01 Book Oblique";
                font-style: normal;
	}
	strong {
		font-family: "Avenir W01 Heavy";
                font-weight: 400;
	}
}

h1,h2,h3,h4,h5,h6 {
	font-family: "Avenir W01 Heavy";
        font-weight: 400;
	&.subheading {
		font-family: "Avenir W01 Light";
	}
}

 

This wasn’t so much a bug as it was a feature, addressing a bug in iOS present up until version 4.2. While understandable at the time, halfway through 2013 not having proper weight and style declarations was becoming incredibly tiring. It almost made me want to just find a similar font on one of the other web-font providers sometimes.

A week ago, fonts.com finally got their act together and released a family grouping feature, allowing you to completely customize the CSS font weight and style declarations for each font. It’s a pretty cool tool and has made my life in website design and development with fonts.com much easier.

grouping

This means we can finally fall back on the normal weights for HTML5 elements such as EMH1, and STRONG.

The SCSS snippet posted further up would now turn into this:

body {
	font-family: "Avenir W01";
}

h1,h2,h3,h4,h5,h6 {
	&.subheading {
		font-weight: 300;
	}
}

 

Awesomeness. Props to the team over at fonts.com for getting this tool put together. You can read more about it here.

Originally published on

Leave a Reply

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

Have Any Questions?

Speak with a
Digital Expert

  • Looking to increase leads?
  • Maximize profits?
  • Redesign your website?
  • Sell Online?
  • Build an App?

Let's Discuss Your Next Project

  • This field is for validation purposes and should be left unchanged.