We set up a new Kit in Typekit for v10. For branding, we'll use Proxima Nova Soft for now and some other fonts that look as close to the HF&J fonts in our mockup as possible.

We're a little worried about the weight of the Kit (literally the file size of all the fonts) but think we can do a bit better before production.

We use the asynchronous JavaScript that Typekit provides, which should be good for our page loading time and safeguards against possible Typekit outages. This means we have to get a little fancy with how the fonts load, which we'll get to.

In our bits.scss file, where we are keeping variables right now, we make a custom @mixin for our font stacks. This will mean it will be really easy to change the fonts in use if we ever need to (change in just one place). We want to keep bits.scss generating absolutely no CSS when compiled, so it can be @imported on any page that needs it without it adding anything to that page importing it.

We tell Typekit about our local custom local development domains, which we will set up next.

Very good to know! I kinda prefer the @mixin approach because then you can toss in extra properties if needed in the same declaration. Like say you load up an @font-face font that only comes in font-weight: 300, you can set that right along with the stack.

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.