[PRO] Opentype features, CSS injection and TypeKit

Support
#1

I’m PRO user and using two Adobe TypeKit typefaces; Halcom and Facto.
I need to add (or append) a class with unique font-feature-settings for each typeface. Typekit says that I have, by default, .tk-halcom and .tk-facto. I have tried to use following code (jQuery):

$(".tk-halcom").addClass("halcom-feature");
$(".tk-facto").addClass("facto-feature");

and

$(".halcom-feature").appendTo("tk-halcom");
$(".facto-feature").appendTo("tk-facto");

Update: .tk-halcom and .tk-facto were loaded. But the custom JS and/or CSS provided from PRO theme do not have a CSS injector to add/append css rules. What to do, if the TypeKit plugin do not brings Opentype features to select?

#2

Hey,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

#3

Thank you!

#4

another issue about the same website: tooltip/popover

I’ve checked the PRO Integrity shortcodes to learn how to insert tooltip and/or popover. The info trigger says: info_trigger: “hover,” “click,” or “focus.”, when I need to show up on load, display for X seconds - or until focus. What the best way to display the [extra] within new conditions? The main reason is: - inform items for navigation in new site version of.

#5

Hi There,

If class tk-halcom and .tk-facto class is already available, why do you need to add another class? I mean why can’t we add the property/CSS rules to these existing classes? Did I misunderstand something here, or you have specific reason? Though that will still work but not needed. There’s also Header CSS for pro header on the left side on the header builder, where we can add custom CSS. Do you have issues using this part?

Unfortunately, onload is not a function included in popover. It’s just hover, click, or focus. You may want to check Convertplus if you want to display a popup onload.

Hope this helps.

#6

@Lely and @john

For .tk-halcom typeface, I need this opentype feature enable globally for Halcom:

.halcom-feature {
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "frac" 0, "salt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "salt" 1, "pnum" 1, "onum" 0 !important;
    -webkit-font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "frac" 0, "salt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "salt" 1, "pnum" 1, "onum" 0 !important;
    -moz-font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "frac" 0, "salt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "salt" 1, "pnum" 1, "onum" 0 !important;
    -ms-font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "frac" 0, "salt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "salt" 1, "pnum" 1, "onum" 0 !important;
}

For .tk-facto typeface, I need this opentype feature enable globally for Facto:

.facto-feature {
    font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "frac" 0, "salt" 1, "swshs" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "salt" 1, "pnum" 1, "onum" 0 !important;
    -webkit-font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "frac" 0, "salt" 1, "swshs" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "salt" 1, "pnum" 1, "onum" 0 !important;
    -moz-font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "frac" 0, "salt" 1, "swshs" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "salt" 1, "pnum" 1, "onum" 0 !important;
    -ms-font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "frac" 0, "salt" 1, "swshs" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1, "salt" 1, "pnum" 1, "onum" 0 !important;
}

Please, help me to enable these opentype feature there.
Note 1: each typeface brings unique configuration about opentype features.
Note 2: I need a global configuration for each typeface.

#7

Are you kidding me?

.tk-halcom and .tk-facto were created by Adobe Typekit. I need CSS rules for each typeface only.

If I am here, I have a specific reason: Adobe Typekit extension do not have Opentype feature support and I need them.

I do not want and I do not need a custom css for header. I really need a global css for each typeface.

#8

Hi There,

Thank you for the clarification.
I found this guide. To add global CSS, go to Theme Options > on left side panel click CSS.

  font-variant: common-ligatures, oldstyle-nums; /*Adjust this accordingly*/
}```

If you have implement it already and still doesn't work, please share us your site URL so we can check/specific page
#9

Hello,

/* ========== OPENTYPE FEATURES BEGIN ========== */
.tk-halcom {
  font-feature-settings: "salt", "kern", "dlig", "liga", "mark", "pnum", "tnum", "vkrn", "vpal", "locl", "case", "cpsp" !important;
}
.tk-facto {
  font-feature-settings: "kern", "dlig", "liga", "mark", "pnum", "tnum", "vkrn", "vpal", "locl", "case", "cpsp" !important;
}
/* ========== OPENTYPE FEATURES END ========== */

I’ve been added in Custom CSS - Cornerstone. Well, doesn’t work, of course - as expected.
Yesterday, I gave y’all admin credentials above. Please, check login/pass and sftp informations.

@Lely, this guide do not guide us, sorry. Since starting support, the problem is only one: enable some properties from font-feature-settings to each typeface. Please, if you pay attention, you’ll see an important sequence:

  1. all css from head area
  2. scripts
  3. typekit
  4. content
  5. more scripts

These classes above need to be loaded AFTER Typekit typeface load and activated, not before that. One more thing: if these classes, loaded after Typekit, to be use the same class do not override a typeface?

Please, check these links. Works properly, indeed. Each page with one typeface.
https://yasper.com.br/_halcom.html
https://yasper.com.br/_facto.html

All settings are correct. When two or more fonts are loaded from Typekit - WordPress, I mean - and we need a global css settings to each typeface, we have a problem.

#10

Hi there,

You have already your answer,

$(".tk-halcom").addClass("halcom-feature");
$(".tk-facto").addClass("facto-feature");

But with a bit of correction when it comes to Wordpress

jQuery( function($) {
$(".tk-halcom").addClass("halcom-feature");
$(".tk-facto").addClass("facto-feature");
});

Then this custom CSS,

.tk-halcom.halcom-feature, tk-halcom.halcom-feature * {
  font-feature-settings: "salt", "kern", "dlig", "liga", "mark", "pnum", "tnum", "vkrn", "vpal", "locl", "case", "cpsp" !important;
}
.tk-facto.facto-feature, tk-halcom.halcom-feature * {
  font-feature-settings: "kern", "dlig", "liga", "mark", "pnum", "tnum", "vkrn", "vpal", "locl", "case", "cpsp" !important;
}

Then you can simply add your element like these

<div class="tk-halcom">A TK Halcom</div>
<a class="tk-halcom" href="">A TK Halcom</a>
[button class="tk-halcom"]A TK Halcom[/button]

Or you can simply add tk-halcom to your cornerstone element’s Class input.

Please note this will not work in cornerstone builder preview but should work on the live page. If you can provide more information of which element you wish this be applied then we can use different selector instead. You can’t apply this globally, you have to make it specific by adding the class tk-halcom. It’s the same in X typography, it doesn’t apply its font to every element and only looks like global since it’s done automatically through PHP generated CSS. And yours is custom, hence, you have to add classes manually too.

Hope this helps.

1 Like
#11

In the TypeKit PRO addon, can I enter more than one code kit? I have tried to insert two, with comma, but doesn’t work properly. How to do it?

#12

Hi there,

Tha’s not possible, it’s only limited per one ID at a time.

Thanks!