Docs

[rok1975]

Hi,

i installed the Typekit-Extension comming with the x-theme.
Then i created a kit and inserted the kit-id. All works fine.

Now i wanted to activate the font in the customizer. But there is no typekit “Source Serif Pro”.
The attached Screenshot shows the Bodyfont-Menu, and i guess whats here “source serif pro (google)” should be “source serif pro (Typekit)”.

If i tried a different kit, all working fine.

I think there is a conflict between google font and Typekit.

I want use the typekit version because there is the font-weight “light” and i need it for my design.

Any suggestions?

Best
Tobi

[Nabeel A]

Hi Tobi,

Thanks for writing in! Please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

[rok1975]

Thanks for the fast reply.

I read a thread about deactivating before here in the forum. But i have only cornerstone, revolution slider and your typekit plugin installed. Deactivating Revslider the Problem still exits.

Any other ideas. Its dubious because all other typkit kits and fonts work.

Tobi

[Christian]

Hey Tobi,

Would you mind giving us access to your WordPress admin and Typekit account?

Thanks.

[rok1975]

This reply has been marked as private.

[Jade]

Hi Tobi,

You seem to have missed posting the URL of your site.

Kindly provide your site link so that we could check further.

Thank you.

[rok1975]

This reply has been marked as private.

[Rad]

Hi there,

Both Google font and Typekit font are combined in one selection dropdown. What’s on your screenshot is correct.

I checked it and the fonts are correctly downloaded from Typekit Server. Example, https://use.typekit.net/af/d5bca9/00000000000000000001565a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3

I also compared the font from your site and it’s the same here

https://www.fontsquirrel.com/fonts/source-serif-pro

Except that, bolder and black versions aren’t included since it’s configured for 200, 300, 400, 700. And since 400 is the regular weight that means 200 is nothing.

Thanks!

[rok1975]

Hi,

thanks. But whats with the light and extra light weight?

If 400 is regular. 300 should be light, and 200 extra light.
In the typekit menu 200, 300 are loaded (typekit-extension.png)
But dont appear in the customizer (customizer-fonts.png)

Maybe i undestood you wrong.

Best
Tobi

[Rad]

Hi there,

It looks like it’s picking up the Source Serif Pro from google fonts and not from Typekit.

https://fonts.google.com/specimen/Source+Serif+Pro?selection.family=Source+Sans+Pro

Because of the same name, there could be a conflict between the two. I’ll continue checking it. For the meantime, you can manually embed the code through @import.

Eg. Add this code to your child theme’s functions.php

add_action('wp_head', 'source_serif_font', 99999);

function source_serif_font () { ?>

<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i');
</style>

<?php }

Then apply font weight to your elements through CSS.

Thanks!

[rok1975]

Thanks!

[rok1975]

Okay i tried it, but only the regular, semi-bold and bold are working correctly.

[Jade]

Glad to hear that.

Cheers!

[rok1975]

Hey Jade,

sorry buts not working. Only the regular, semi-bold and bold are working correctly. All other font-weights are not showing correctly. With your code provided above the font-weights are loaded but if i tried to apply “font-weight:200;” nothing will happen. I guess these font-weights are not provided by google.

Thats why i want to use typekit from adobe, because the support these font-weights.

Best
Tobi

[Rad]

Hi there,

The above code is a temporary solution and it will not add up the missing font weight through CSS but not in customizer. You’ll have to manually apply font weight through CSS,

Example,

h1 {
font-weight: 200;
}

For the meantime, maybe we can solve it this way. Please edit this file,

wp-content\plugins\x-typekit\functions\output.php

and change this code

function x_typekit_filter_kit_data_into_x( $data ) {

  require( X_TYPEKIT_PATH . '/functions/options.php' );

  if ( isset( $x_typekit_enable ) && $x_typekit_enable == 1 ) {
    $output = array_merge( $x_typekit_request, $data );
  } else {
    $output = $data;
  }

  return $output;

}

to this

function x_typekit_filter_kit_data_into_x( $data ) {

  require( X_TYPEKIT_PATH . '/functions/options.php' );

  if ( isset( $x_typekit_enable ) && $x_typekit_enable == 1 ) {
    $output =  $x_typekit_request;
  } else {
    $output = $data;
  }

  return $output;

}

It will remove all the google fonts, and will prevent conflict between the same font from both Typekit and Google font.

Then install transient cleaner plugin to clear internal caches.

Thanks!

[Author]

Posts