#014: Custom Fonts with Typekit

(Updated on )

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.