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.
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.
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.
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.
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:
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.
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.
So, what was that secret design project that Richard sent you that you weren’t supposed to share then? hehe just jokin