Typography takes the main stage in modern web design.
Apart from optimal readability, great typography not only helps us to get the right emotion across to our readers, but also helps to build trust right from the first impression.
Web typography is catching up with print and the difference between a site with great typography and a site with bad typography is like night and day.
Done right, it is the best way to give your projects a sense of authenticity, authority and trust, which is what we are always looking to achieve.
Setting Up TypeKit With Genesis
If you’ve never dabbled in the Typekit world before, firstly I think you’ll be surprised at how cheap it is for how many quality fonts you get access to. Secondly, it is really easy to set up.
Find the fonts you need from Typekit and then click ‘Use Fonts’. Underneath ‘web’ you are given the option to create a new kit.
A kit is a collection of fonts used for one particular project. The idea is that you fill your kit with the fonts you need for your website, along with the exact weights you are needing.
Once this is done, the embedded code can be easily added to Genesis in Dashboard > Genesis > Theme Settings
Now your font collection will be loaded in your site.
To find the CSS needed to display the fonts correctly, click ‘Using fonts in CSS’ found in your Typekit editor. Doing so will display this page…
In your Genesis child theme’s stylesheet, add the values. Here is an example of how you would add this font to your theme.
In the example above, you can see that I have selected Raleway from Google fonts as a fallback incase Typekit font doesn’t load.
This CSS snippet can either be added to the bottom of your stylesheet or you can find the CSS which already controls the font and simple change the font name.
We hope this tutorial was helpful and sends you on a journey towards better typography.