Edit this on Github

Typekit UI

With the Creative SDK, you can provide your users with access to Typekit fonts that are available to them in the Creative Cloud.

In this guide, we will look at how your users can manage their Typekit Synced Fonts list and how you can let them access and use their Typekit fonts, all right from within your app.

By the end of this guide, we will have an Android app that:

  1. Launches the Typekit selector
  2. Downloads a list of your user's Typekit Synced List fonts
  3. Applies a Typekit font to a TextView

Contents

GitHub

You can find companion GitHub repos for the Creative SDK developer guides on the Creative SDK GitHub organization.

Be sure to follow all instructions in the readme.

Prerequisites

This guide will assume that you have installed all software and completed all of the steps in the following guides:

  • Getting Started
  • User Auth UI

Note:

Configuration

Add the following Creative SDK dependencies to your Module build.gradle file:

/* Add the CSDK framework dependencies (Make sure these version numbers are correct) */
compile 'com.adobe.creativesdk.foundation:auth:0.9.2006-5'
compile 'com.adobe.creativesdk:typekit:0.9.2006-5'

Launching the Typekit Font Browser

The Typekit UI component provides an Activity with a UI that allows your users to:

  1. Browse all fonts available to them
  2. Manage the contents of their "Synced Fonts" list

Your app can provide access to any font that your user has stored in their "Synced Fonts" list:

Launching the Typekit UI component is as simple as making one method call:

AdobeTypekitFontBrowser.launchActivity(context);

Common use patterns include wrapping this method call in a button's on-click listener or associating it with a Toolbar menu item. (For this example, go ahead and add the launchActivity() method in a menu item.)

Note: If you followed the steps in the User Auth UI guide, and are unable to get the Typekit Font Browser to launch, try logging out of your Adobe ID in the app and logging back in.

Accessing fonts

You can access Typekit fonts from the user's Synced Fonts list using APIs contained within the Typekit classes.

As a simple example, let's have a look at getting a random font from the user's Synced Fonts list and using the font to set the typeface of a TextView.

  1. Initializing the AdobeTypekitManager
  2. Syncing fonts and triggering Typekit notifications
  3. Observing Typekit notifications
  4. Applying a Typekit font

Initializing the AdobeTypekitManager

The AdobeTypekitManager class manages the downloading of Typekit fonts and other related information. Correct use of the AdobeTypekitManager is required for accessing Typekit fonts.

Note: Your user must be logged in with their Adobe ID before you initialize the AdobeTypekitManager. Your AdobeAuthSessionHelper.IAdobeAuthStatusCallback is a good place to initialize the AdobeTypekitManager.

You can initialize the AdobeTypekitManager like this (see comments #1-3):

public class MainActivity extends AppCompatActivity {

    // ...

    private AdobeUXAuthManager mUXAuthManager = AdobeUXAuthManager.getSharedAuthManager();
    private AdobeAuthSessionHelper mAuthSessionHelper;

    /* 1) Store an instance of `AdobeTypekitManager` as a member variable */
    private AdobeTypekitManager mTypekitManager = AdobeTypekitManager.getInstance();

    // ...

    private AdobeAuthSessionHelper.IAdobeAuthStatusCallback mStatusCallback;
    {
        mStatusCallback = new AdobeAuthSessionHelper.IAdobeAuthStatusCallback() {
            @Override
            public void call(AdobeAuthSessionHelper.AdobeAuthStatus adobeAuthStatus, AdobeAuthException e) {
                if (!mUXAuthManager.isAuthenticated()) {
                    login();
                } else {
                    Log.d(TAG, "Already logged in!");

                    /* 2) Call a helper method to initialize the `AdobeTypekitManager` */
                    initializeTypekitManager();
                }
            }
        };
    }

    /* 3) Make a helper method to initialize the `AdobeTypekitManager */
    private void initializeTypekitManager() {
        try {
            mTypekitManager.init(this);
        } catch (UserNotAuthenticatedException e) {
            e.printStackTrace();

            Toast.makeText(this, "Please log in to Creative Cloud to use Typekit fonts!", Toast.LENGTH_LONG).show();
        }
    }

    // ...

In the try/catch statement above, if your user is not yet logged into Creative Cloud via your app, they will see a Toast prompting them to do so. (If you followed the steps in our User Auth UI guide, the user will have already logged in.)

Syncing fonts and triggering Typekit notifications

You can get the list of all fonts in the user's Synced Fonts list by calling the syncFonts() method, often via a button, a menu item, or directly in your Activity's onCreate() method.

For this example, add the following method call in a button's OnClickListener:

mTypekitManager.syncFonts();

The syncFonts() method is asynchronous.

To get the results, your app should observe the TypekitManager for notification events listed in the TypekitNotification.Event enum, as covered in the next section.

Note: For brevity in this guide, we are calling syncFonts() every time we want to apply a font. This is not the most performant approach, since two round trips are required (to sync the list, then to get the font). Be sure to find the right balance of keeping the list in sync and minimizing syncFonts() calls.

Observing Typekit notifications

As noted above, the syncFonts() method is asynchronous. To know when the operation is complete (and the user's Typekit Synced Fonts list has been synced to your app), we need to observe any TypekitNotification coming from the TypekitManager.

See comments #1-3 in the example below:

/* 1) Implement the `Observer` interface  */
public class MainActivity extends AppCompatActivity implements Observer {

    // ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ...

        try {
            mTypekitManager.init(this);

            /* 2) Add the Activity as an Observer to watch for Typekit notifications */
            mTypekitManager.addObserver(this);
        } catch (UserNotAuthenticatedException e) {
            e.printStackTrace(); // Error : User not authenticated.

            Toast.makeText(this, "Please log in to Creative Cloud to use Typekit fonts!", Toast.LENGTH_LONG).show();
        }
    }

    // ...

    /* 3) Implement the `Observer` interface method */
    @Override
    public void update(Observable observable, Object data) {
    }

    // ...

Within the update() method above, we will watch for TypekitNotification events, and have the app react depending on the notification:

@Override
public void update(Observable observable, Object data) {
    
    TypekitNotification notification = (TypekitNotification) data;
    
    switch (notification.getTypekitEvent()) {

        case TypekitNotification.Event.FONT_SELECTION_SYNC_START:
            Toast.makeText(MainActivity.this, "Syncing Typekit Synced Fonts list...", Toast.LENGTH_SHORT).show();
            break;

        case TypekitNotification.Event.FONT_SELECTION_REFRESH:
            ArrayList<AdobeTypekitFont> syncList = AdobeTypekitFont.getFonts();
            Random random = new Random();
            applyFont(syncList.get(random.nextInt(syncList.size())));
            break;

        case TypekitNotification.Event.FONT_SELECTION_SYNC_ERROR:
            Log.e(MainActivity.class.getSimpleName(), "Error: " + notification.getTypekitEvent());
            break;
        
        case TypekitNotification.Event.FONT_NETWORK_ERROR:
            Log.e(MainActivity.class.getSimpleName(), "Error: " + notification.getTypekitEvent());
            break;
        
        case TypekitNotification.Event.FONT_CACHE_EXPIRY:
            Log.e(MainActivity.class.getSimpleName(), "Warning: " + notification.getTypekitEvent());
            break;
        
        default:
            break;
    }
}

Note that the FONT_SELECTION_SYNC_START notification indicates when the font sync starts, and FONT_SELECTION_REFRESH indicates when the sync list has been successfully updated.

In the basic example above, when we get the FONT_SELECTION_REFRESH notification, we get our user's Typekit Synced Fonts list in the syncList variable, and pass a random font to applyFont().

We will make the applyFont() helper method in the next step.

Applying a Typekit font

There are two ways to a get a Typekit font typeface:

  1. AdobeTypekitFont.getSubsetTypeface()
  2. AdobeTypekitFont.getTypeface()

If you already know the entire target string beforehand, such as when applying a font to a TextView, use getSubsetTypeface(), which only downloads the characters you need and will therefore be faster.

(Before moving forward, be sure to add the two TextView widgets (mTargetTextView and mFontNameTextView), referenced in the sample code below, to your layout.)

Below is an example of using the getSubsetTypeface() method (see comments #1-4):

private void applyFont(AdobeTypekitFont adobeTypekitFont) {

    /* 1) Get the string you will apply the typeface to */
    String targetString = mTargetTextView.getText().toString();

    /* 2) Pass the string and a callback to `getSubsetTypeface()` */
    adobeTypekitFont.getSubsetTypeface(targetString, new AdobeTypekitFont.ITypekitCallback<Typeface, String>() {
        @Override
        public void onSuccess(AdobeTypekitFont adobeTypekitFont, Typeface typeface) {

            /* 3) Handle success */
            mTargetTextView.setTypeface(typeface);
            mFontNameTextView.setText(String.format("Font name: %s", adobeTypekitFont.displayName()));
        }

        @Override
        public void onError(AdobeTypekitFont adobeTypekitFont, String s) {

            /* 4) Handle errors */
            Log.e(MainActivity.class.getSimpleName(), s);
        }
    });
}

Conversely, if you don't know the target string in advance, such as when applying the typeface to an EditText widget, or when you know the target string will change, use getTypeface(). This method works the same as the above example, but you only need to pass in a callback.

At this point, you will have an app that looks something like this:

You have now integrated the Creative SDK's Typekit UI component!

While this is a very basic example of how to use the Creative SDK Typekit APIs, you can learn more on the Creative SDK GitHub organization, including how to make your own font picker with a Spinner widget, and how to apply a font to an EditText widget.

Troubleshooting and Known Issues

Articles about common issues are at help.creativesdk.com, along with a place to submit tickets for bugs, feature requests, and general feedback.

Class Reference

In this guide, we used the classes in the list below. Explore the documentation for more class methods and details.

  • AdobeTypekitFontBrowser
  • AdobeTypekitManager
  • TypekitNotification
  • TypekitNotification.Event
  • AdobeTypekitFont
  • AdobeTypekitFont.ITypekitCallback