How to Add Adobe Fonts (Typekit) to GeneratePress

Easily add Adobe Fonts to your website using CSS instead of Javascript.

I’ve always avoided using Typekit, which is now known as Adobe Fonts, simply because of the issues with the javascript embed code. If you are familiar with the term FOUT or FOUC (flash of unstyled text or content), you know exactly what I am talking about. It’s that quick flash of default fonts on your website before the Typekit fonts finish loading. It’s not only annoying, but doesn’t look very professional either.

The new CSS method of using Adobe Fonts on your website works perfectly and is actually really easy to implement. If you have an account, Typekit has 1000’s of really nice fonts, which are a great alternative to using Google fonts. In the video below I walk through the most beginner friendly method of adding Typekit fonts to your website.

Quick Note

The method used in this video uses the GeneratePress Hooks feature to hook the Typekit CSS url into the Head section of your website. If you are using another WordPress theme you can use a plugin like Head, Footer and Post Injections and easily add the CSS link in the Head section.

Adding Adobe Fonts (Typekit) to GeneratePress

Please feel free to Contact Me if you have any questions and happy font searching!

Feel Free to Share