[Resolved] Typekit woes

[Shehzad]

I have bought GP premium and really like it. However, I am REALLY truggling to find a way to add Tyoekit fonts. I have read the relevant posts on the forum. I have tried using a PlugIn to see if that would help etc.
Can someone who has successfully installed/used the kit be so kind to describe step by step process (I have Typekit Kit published, have the embed code etc) for a non-coder?

[Tom]

Hi there,

1. Take the javascript they give you, and paste it into the wp_footer hook in “Appearance > GP Hooks”.

2. Grab the name they give you for the font-family value. For example: https://www.screencast.com/t/0aqJhavEgj8Z

Then we add it into a function like this, which will add it as an option in the Customizer:

add_filter( 'generate_typography_default_fonts', 'tu_add_typekit_fonts' );
function tu_add_typekit_fonts( $fonts ) {
    $fonts[] = 'proxima-nova';
    return $fonts;
}

You can add that function using one of these methods: https://docs.generatepress.com/article/adding-php/

Let me know if you need more info 🙂

[André]

Hey Tom, what’s the process to add a font filter for a locally hosted font?

We’re using @font-face to host our main body font locally on the server.

If there a way to be able to access the font from within GP?

André

[Tom]

Absolutely! Once it’s added uses @font-face, you can add it to the Customizer like this: https://docs.generatepress.com/article/generate_typography_default_fonts/

[André]

Brilliant! .. thx, Tom!

[Tom]

You’re welcome 🙂

[André]

Tom, Adobe Typekit now supports loading of fonts via a CSS embed code (instead of the JavaScript):

https://blog.typekit.com/2017/11/16/new-on-typekit-load-web-fonts-with-css/

Would the process be the same to add to GP?

André

[Tom]

Cool! So now you would copy that snippet, and paste it into the wp_head hook.

The rest of the steps are the same 🙂

[André]

Cheers, Tom.

[Robin]

I installed a typekit font on another site. Duplicated the process on another site (I created a new kit for this for the new domain).

The font is not showing. Any help would be appreciated. Thanks.

Here’s the site: https://www.ungovernable.co.uk (not as scary as it sounds)

[Tom]

I’m seeing “Muli” as the main font on your site. Which element are you trying to apply the Typekit font to?

I’m also seeing this URL being called in your source: https://use.typekit.net/ydp6rph.css

That URL doesn’t seem to be working.

[lerschiboi]

I’m trying to add Typekit fonts as well at the moment and am struggling a bit.

I have a kit with several fonts and was able to add 1 of the fonts to the customizer. But how does the function have to look like when I want to add several fonts?

[Tom]

Hi Lars,

It would look like this:

add_filter( 'generate_typography_default_fonts', 'tu_add_typekit_fonts' );
function tu_add_typekit_fonts( $fonts ) {
    $fonts[] = 'proxima-nova';
    $fonts[] = 'another-font';
    $fonts[] = 'one-more';
    $fonts[] = 'last-one';

    return $fonts;
}

[lerschiboi]

Awesome, that worked. Thanks 🙂

[Tom]

No problem 🙂

[Author]

Posts