How do I access my Adobe TypeKit OpenType Features?

Support
#1

Here’s a link to understand what I want to achieve:

https://helpx.adobe.com/typekit/using/open-type-syntax.html

Thanks.

#2

Hi There,

Thanks for writing in! You can integrate Typekit by following this method (https://theme.co/apex/forum/t/extension-typekit/88).

Then for the specific features as you have mentioned on the referenced link, you can add the relevant CSS into your Theme Options > Global CSS area.

Thanks!

#3

Hi @mldarshana, thanks for getting back to me!

Should I just copy and paste all the code categorically needed as per
the link I included above or should I follow the code in the below link?

https://helpx.adobe.com/typekit/using/use-open-type-features.html

I’d like full access to all my stylistic options.

Thanks

#4

Yes, you will just need to use the code you need. Otherwise, you will add bloat to your page.

#5

I’m on it…

#6

Let us know how it goes.

#7

@jade, thanks for your interest.

I’ve added the code but now I don’t know how to access
my OpenType Features within my text where I want them to
appear…

I have limited text at the moment as I’m building. So far, I do
have the “TM” sign that needs to be superscript and I tested
if the “SMALLCAPS” work through the Text Editor options
(All Caps) but doesn’t.

Here’s my code:

Any help will be appreciated.

Thanks

#8

Hi There,

In the example css .class is used for demonstration purpose only. You can rename it to any name as you would like for example .my-custom-headline and then assign that class into your element.

For example.

.my-custom-calt {
    font-variant-ligatures: contextual;
    -moz-font-feature-settings: "calt";
    -webkit-font-feature-settings: "calt";
    font-feature-settings: "calt";
}

[custom_headline class="my-custom-calt" type="left" level="h2" looks_like="h3" accent="true"]Custom Headline[/custom_headline]

Hope that helps.

#9

This blows over my head.

I’m not a developer, I’m a designer.

You have to really break things down to make me understand.

#10

Hi,

First of all kindly change all your .class to be unique for each font variant.

eg.

.type-small-caps {
  font-variant-caps: small-caps;
  -moz-font-feature-settings: "smcp";
  -webkit-font-feature-settings: "smcp";
  font-feature-settings: "smcp";
}

.type-contextual {
    font-variant-ligatures: contextual;
    -moz-font-feature-settings: "calt";
    -webkit-font-feature-settings: "calt";
    font-feature-settings: "calt";
}

.type-no-contextual {
    font-variant-ligatures: no-contextual;
    -moz-font-feature-settings: "calt" 0;
    -webkit-font-feature-settings: "calt" 0;
    font-feature-settings: "calt" 0;
}

You can then apply this to any element by adding the class in the class field.

eg. Implementing Small Caps to Text Element

or you can add it to a specific text like this

This is a <span class="type-small-caps">test</span>

Hope this clarifies.

#11

Hi @paul.r,

Thanks so much for clarifying!

Will do my best to see if I can pull it off.

#12

#13

Hi,

Please provide us your site url so we can take a clsoer look.

Thanks

#14

Sent you a secure note to have a look please.

#15

Hi,

I can see you provided a login but forgot to include a link to your site.

Please provide us your wordpress admin login url so we can check.

eg. http://yoursite.com/wp-login.php

Thanks

#16

Sorry, sent now.

#17

Hi,

Please refer to your other thread.

Thanks

#18

Ok will check

#19

Sure, let us know how it goes.

Thanks.

#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.