• Skip to content
  • Skip to footer
Abbey Fitzgerald Web and UX Designer

Abbey Fitzgerald

UX Software Engineer and Digital Designer

Main navigation

  • About
  • Services
  • Work Examples
  • Blog
  • Contact
  • All Categories
    • Design Reflections
    • Digital Design
    • WordPress
    • UX

November 4, 2016 By Abbey Fitzgerald Filed Under: WordPress

Use Typekit on Your Genesis Theme

  • Facebook
  • Twitter
  • Pinterest

There are many options for web fonts. We’ve become accustom to Google Fonts, which offers a lot of great options. If you’re in the process of shopping around for web fonts, certainly give Google Fonts a look but also keep in mind that there are some great fonts in Adobe Typekit as well. As we are immersed our Adobe design world, we often forget that there are tons of fonts that can be easily added to websites for a truly beautiful type experience.

Typekit Choices

If you haven’t checked out Typekit yet, you’ll be surprised at how many great type options there are. Once you find your desired typefaces, it’s pretty easy to start using them on your website.

Using Typekit fonts

When you find the fonts that you like, click “Use Fonts”. Underneath “web” you are given the option to create a new kit.

Add to Typekit

A kit is a collection of fonts used for a project. A website has a “kit” of fonts that are being used. That way things are organized and only the needed fonts are referenced. The kit contains the specific typeface and the specific weights that you’d like to use. I’ve created a kit with my website’s name. When there are multiple kits, it is clear which one I’m looking at.

Typekit Selection

Referencing and embedding the font

When looking at the kit, double check that all the font families and the correct weights are chosen. Be sure to Publish.

Typekit Publish

You’ll see an Embed Code option. This is what will be added to your Genesis theme. Copy that snippet.

Typekit Embed Code

Adding Typekit fonts to a Genesis theme

Once this is done, the embedded code can be easily added to Genesis in Dashboard > Genesis > Theme Settings. Look for the Header Scripts field and paste the embed code in there.

Paste Typekit Snippet into Genesis Theme

Use font in CSS file

To actually see the file, it will need to be referenced in the CSS file. To test this out, I am going to add this to the body style.

Typekit New Font Usage

The body font is now using the new font so things are working with the new Typekit option.

  • Facebook
  • Twitter
  • Pinterest

Filed Under: WordPress Tagged With: Adobe Typekit

Abbey Fitzgerald

In addition to being a UX sofware engineer, I can be found writing, designing and developing all sorts of great content. When not in front of a backlit device, I dabble in charcoal and oil paint. I live in Minneapolis, MN and live up to the reputation of Minnesota Nice.

Recent Posts

  • How to break up with a design you love
  • Formatting code and pre text
  • New Parking Spot Technology Ramps Up at Mall of America
  • My Italy Adventure
  • Why do I paint?

Reader Interactions

Comments

  1. Charley says

    June 28, 2017 at 5:43 pm

    Thanks for the terrific guide

    Reply
  2. Karolyn says

    July 1, 2017 at 5:35 pm

    Thanks, it is quite informative

    Reply
  3. Jeanett says

    July 1, 2017 at 5:57 pm

    I enjoy the article

    Reply
  4. Milla says

    July 14, 2017 at 2:40 pm

    It works really well for me

    Reply
  5. Www.unitesdk.Com says

    July 14, 2017 at 6:13 pm

    Thanks for the excellent manual

    Reply
  6. Wilma says

    July 14, 2017 at 7:35 pm

    I enjoy the article

    Reply
  7. Raymundo says

    July 14, 2017 at 7:46 pm

    Thanks, it’s very informative

    Reply
  8. Jannette says

    July 14, 2017 at 8:38 pm

    Thanks for the wonderful guide

    Reply
  9. Millie says

    July 14, 2017 at 10:45 pm

    Thanks to the terrific manual

    Reply
  10. Leonore says

    July 14, 2017 at 11:21 pm

    This is truly helpful, thanks.

    Reply
  11. http://calistaheritage.org/ says

    July 15, 2017 at 12:15 am

    It works very well for me

    Reply
  12. Mable says

    July 15, 2017 at 2:00 am

    I enjoy the report

    Reply
  13. www.spykeworld.Com says

    July 16, 2017 at 6:45 am

    This is really helpful, thanks.

    Reply
  14. http://www.ucgbc.org/ says

    July 18, 2017 at 3:47 pm

    I enjoy the report

    Reply
  15. www.gipsonwvl.com says

    July 18, 2017 at 4:24 pm

    Thanks to the great guide

    Reply
  16. Callie says

    July 19, 2017 at 12:35 pm

    I spent a great deal of time to locate something such as this

    Reply
  17. Kris says

    July 20, 2017 at 2:35 pm

    I enjoy the report

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

Contact

Want to discuss your next project? I'm here to help!

Contact Abbey

About Abbey Fitzgerald

Abbey Fitzgerald UX and Web Designer

I am Minnesota nice. Located in Minneapolis, MN, I'm a UX software engineer with a long history in the digital design space. My goal is to make people's lives easier by creating and improving their experience.

Life can't be all work and no play. I also like to dabble in charcoal and oil paint.

Let’s Connect

© 2023 Abbey J. Fitzgerald, LLC