Typekit woes

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 :)

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é

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/

Brilliant! .. thx, Tom!

You're welcome :)

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é

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

The rest of the steps are the same :)

Cheers, Tom.

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)

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.

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?

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;
}

Awesome, that worked. Thanks :)

No problem :)