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.


  1. User Avatar
    Clint Fern
    Permalink to comment#

    I’m sure I’ll be the only user with this issue but with Chrome & XP (cue dinosaur jokes) there is the bug that web fonts look **** – they’re fine in Firefox, screenshot here http://www.flickr.com/photos/clintnice12/7966002466/.

    I’ve never seem a real fix for this and if its not on csstricks it may be up to Google to fix – just thought that it may be a jolt for Retina users to see this.

    • User Avatar
      Permalink to comment#

      Chrome font rendering seems to be a pretty common problem, at least Chrome windows. It is hard to get it to render very many fonts nicely.

  2. User Avatar
    Miguel Chamorro
    Permalink to comment#

    No, you aren´t the only user with this issue. I am on Windows 7 and Chrome 21 show the same problem with the fonts. IE 9 and Firefox render correctly the fonts.

  3. User Avatar
    Permalink to comment#

    SASS also allows you to set stuff like font stacks to variables, too, even though you may not think it does.

    So you could do:

    $font-brand: Arial, Helvetica, sans-serif;
    .logo { font-family: $font-brand; }

    I kinda felt like that may not have necessarily worked cuz it has commas and spaces, but it’s all kosher in SASS. Both compile to the same, of course, so it’s mostly preference.

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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.

  4. User Avatar
    Max G J Panas
    Permalink to comment#

    So, what was that secret design project that Richard sent you that you weren’t supposed to share then? hehe just jokin

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.