Incorporating TypeKit

[JMichaelBrowning]

Hello and thank you for this wickedly-awesome theme. I’m just wondering what would be the best way to go about incorporating Adobe TypeKit? I’m trying to find a way that doesn’t include massive custom CSS changes.

The way I’ve done it with other themes, is to add the TypeKit javascript to the custom CSS/Javascript area, then added the option to select said font from the drop down menus. However, this is kicking my butt and I can’t figure it out.

Any help or “pointage” in the right direction would be greatly appreciated.

Thanks!

[Swift Ideas – Ed]

Hi there, thanks for the kind words!

This is something that I would have liked to support out-the-box, but unfortunately it isn’t possible with Redux as of yet.

Give me a couple hours to set aside some time to test out a few solutions, then I’ll write up a quick guide on the best method that I’ve found, and to ensure you can set the font correctly for the different body/menu/heading fonts etc.

Will get back to you shortly.

Thanks,

– Ed

[JMichaelBrowning]

Ed – You’re my new best friend!

I normally wait to add ratings on ThemeForest, but five stars coming your way.

Thank you!

[Swift Ideas – Ed]

Thanks JMB, appreciate it 🙂

Just successfully set up TypeKit on one of our test sites, and working very nicely. Will write up the guide now and drop you a link for it.

This plugin seems to be the easiest solution, https://wordpress.org/plugins/typekit-fonts-for-wordpress/

The guide will provide all the CSS selectors that the standard font options uses, so that you can override these, plus keep the Custom CSS separate to the theme options css.

– Ed

[JMichaelBrowning]

Awesomeness! I’m familiar with the above plugin and have used it before. Thank you for your help!

[Swift Ideas – Ed]

Here you go! http://cardinal.swiftideas.com/documentation/2014/07/04/using-typekit-fonts/

Let me know if you have any questions, or if there is anything you think I should add.

Thanks!

– Ed

[JMichaelBrowning]

Testing it out now. I’ll follow up once I’ve gone through the process.

Again, thank you!

-Michael

[JMichaelBrowning]

Ed –

Just to follow up … your walk-thru works perfectly. However, instead of using the plugin, I’m using the child theme.

The only issue that I’m running in to is that on page load it initially displays the fallback font and then converts to the TypeKit font. I’ve tried both with the plugin and the child theme with the same results for both.

I’m guessing it has to do with the order of the JavaScript loading.

Hmm … time to dig in.

Thank you for the support and quick turn around!

-Michael

[Swift Ideas – Ed]

Hi Michael,

Ahh yes – that’s completely possible to use the child theme, just think most users would probably prefer a plugin as not all use a child theme.

That’s odd about the flash of text.. Testing here and I can’t replicate it at all, might be down to the hosting.

Do you have the fonts set to google fonts in the Font Options, or standard fonts?

– Ed

[JMichaelBrowning]

I use synthesis as my web host and hadn’t had an issue with TypeKit and the previous theme.

I’ve tried both options in Font Options with the same result. But here’s the weird part, I get the flash of text in both Firefox and Chrome, but not Safari.

Scratching my head here.

[Swift Ideas – Ed]

This reply has been marked as private.

[JMichaelBrowning]

This reply has been marked as private.

[Swift Ideas – Ed]

Wow, that isn’t even a slight flicker. The font seems to be loading a good 3-4 seconds after the page..

I’ve noticed you have LayerSlider + RevSlider installed? Is that intentional? Might be worth disabling a few to see if anything is conflicting.

Happy to help 🙂

– Ed

[JMichaelBrowning]

Disabled both LayerSlider and RevSlider with same results. Disabled all plugins … same results. Hmm …

[Swift Ideas – Ed]

I think it may be caching (like you said).. Can’t seem to see any other possibility. Are you running CloudFlare?

– Ed