WordPress Event Ticketing

Fonts are more important than anything else on your website, the design, the speed, everything. You could have the best website in the world, but if you have a difficult to read font, no one's going to stick around and read your content. Luckily, you can change the fonts used throughout your site without much hassle. Many themes now come with built-in font options for Google Fonts, or you can add custom fonts with CSS to make your typography stand out. There is though another way you can change your fonts by using Adobe TypeKit which we'll now explain in depth so you can give your website a nice looking overhaul when it comes to typography.

What's the cost?

 

I know what you're thinking; most Adobe products are prohibitively expensive, and you most probably can't afford to use Adobe Typekit on your website. Luckily, you can!

 

There's a basic plan which includes a limited selection of fonts available for use to try on websites and sync, this basic plan is completely free forever for life. No nasty surprises or sudden turnarounds. Then there's the Portfolio Plan. This plan includes all fonts in the Adobe Typekit library available for use on unlimited websites and with sync. This plan comes in at a respectable $49.99 per year, making it extremely affordable.

On the other hand if you are a creative professional and fancy getting the whole suite of Adobe software you might want to subscribe to the Adobe Creative Cloud. The full suite of Adobe apps is $49.99/month when you signup to the annual plan and pay it monthly. Giving you access to 20+ Adobe apps including Photoshop CC, Illustrator CC and much more. This cost creeps up to $75/month if you pay month to month with no annual commitment.

Why Would I want to use TypeKit?

Offering thousands of fonts from multiple partners, TypeKit brings those fonts together in one library for you to use across all your websites. Simply select a font to add it to your kit and publish it, and the font is ready to use. It's never been easier to use different fonts on your website than using Adobe TypeKit.

 

Simply put, Typekit offers the widest range of well designed and well thought out fonts.

 

Not only that, but Adobe Typekit also has seamless integrations with a range of applications and software including Photoshop, meaning you can design a graphic in Photoshop for use on your website with the same fonts that your website has available. Keeping your fonts in sync like this is a breeze. You check out the thousands of fonts available here.

How Do I add Adobe TypeKit to My WordPress Website?

Luckily, adding Adobe Typekit to your WordPress site couldn't be simpler. There are a range of different plugins and themes that make this easier than ever. Some themes come with built-in integrations with Adobe TypeKit including X (https://theme.co/x/). Or you can use one of the plugins available on the WordPress.org Plugins Repository.

One such plugin available for adding Typekit fonts to your WordPress website is called Typekit Fonts for WordPress. This plugin saves you from needing to modifying your child theme. Simply upload and active the plugin, then copy the code snippet provided by Adobe Typekit, enter in the custom CSS rules to target the font you want to change... et voliá - you are done! Utilizing this method, you can be up and running with Adobe TypeKit in less than 30 minutes.

You could, as an alternative, implement the code yourself manually by using a child theme. Adobe has full instructions on this here.

There are a couple of points though, on the above article, there is no mention of using a child theme. Using a child theme is an absolute must. If you edit your parent theme with the Adobe Typekit code as provided and then there's a theme update. When you update the theme, you may notice your fonts no longer work. You know why? Because you didn't use a child theme. If you ever edit the parent theme with any changes, all those changes are lost when updating. You should never edit the parent theme for any reason.

In Adobe's instructions they mention about editing the theme directly from the WordPress Admin > Appearance > Editor. This is just like editing a parent theme and should never been done.

If you edit your theme from the appearance, > editor section within your WordPress Admin and you miss a closing tag or have a misplaced comma perhaps you could bring down your whole site with a fatal error. You can't fix that unless you have FTP access. Always make sure you edit files on your website using a code editor via FTP or even your cPanel's file manager if you don't have FTP access.

If your theme doesn't have built in Typekit integration and you need to target the fonts using CSS to replace them and aren't sure what to do, you should be able to ask the theme developer of the theme your using. Most support teams are happy to help with these minor tweaks. It's just a matter of targeting the correct font size such as an h1, h2, p tag, etc. and then using the font-family from the Adobe Typekit you published. Remember though if you don't add the script as well, then the fonts won't work.

If you don't have a self-hosted website using WordPress.org, but instead have a site hosted on WordPress.com you can still use Adobe TypeKit. In WordPress.com there is a TypeKit setting, just enter in your kit ID and away you go. Adobe has more information on TypeKit for WordPress.com here.

Conclusion

Adding Adobe Typekit to your WordPress website couldn't be easier. The part that will be harder is choosing just a few fonts to use from the thousands of fantastic fonts available when using TypeKit. Have you ever used TypeKit before? Perhaps you've had trouble getting it working? Let us know in the comments below.