I was looking for a way to copy all of the settings from one Adobe Typekit account to another. In this case, it was from a previous designer for whom we had taken over for our one of our clients so asking directly wouldn’t have gone over too well. We could have just left it in place with the old code, but that could have caused problems if (when) the old designer disabled that Typekit. Plus, we were in the middle of rebranding and needed to move the site to a new domain and the Adobe Typekit domain name filtering was causing issues so we we really needed to recreate the Kit correctly. I thought this might be a painful process of trial-and-error but it turns out it’s pretty easy to recreate the kit.
Identifying the Old Typekit Settings
Start out by viewing the the source code for the page that uses Adobe Typekit and view the source. Find the line that loads the Typekit you need to replicate and copy the URL for the JavaScript file. The Code should look like this:
<script src=”//use.typekit.net/xxxxxx.js”></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
Note that the ‘xxxxxxx’ will be replaced with a seven-character code that corresponds to the TypeKit identifier on the old account.
Copy the //use.typekit.net/xxxxxx.js URL and paste it into your browser bar. This should allow you to view the contents of the JavaScript file that loads the Adobe TypeKit fonts. We don’t need most of this file, but the first few lines are critical. Locate the line that beings with “window.Typekit.config“. You should see something like this:
window.Typekit.config = { “a”: “504211”, “c”: [“.tk-jubilat”, “\”jubilat\”,sans-serif”, “.tk-brandon-grotesque”, “\”brandon-grotesque\”,sans-serif”], “f”: “//use.typekit.net/c/acf94f/1w;brandon-grotesque,2,Y2m:P:i4,Y2r:P:i7,Y2j:P:n3,Y2l:P:n4,Y2n:P:n5,Y2q:P:n7;jubilat,2,Vxx:P:n4,QzW:P:n5,W1K:P:n6,Vxz:P:n7/{format}{/extras*}?3bb2a6e53c9684ffdc9a9bf5195b2a620ddcd3046f58c4dc110107391966c053d2fed59f7e7d9e6922050db1ab50987fa2140ad9fcbd3207015cd8591f37ab821cd72c4238b0cceb3e3f8c871bdccdd165fde9d98d4bb4b2c57858f25529ad13f5053892ef153191327c939d5469396821ce66aac4b64fe7c51e804bcdffec1c36efb69a70”, “fi”: [9882, 9884, 9892, 9894, 10294, 10295, 10296, 10297, 10300, 10302], “fn”: [“brandon-grotesque”, [“i4”, “i7”, “n3”, “n4”, “n5”, “n7”], “jubilat”, [“n4”, “n5”, “n6”, “n7”]], “ht”: “tk”, “js”: “1.8.3”, “k”: “//use.typekit.net/{id}.js”, “kt”: “hel3gtn”, “l”: “typekit”, “p”: “//p.typekit.net/p.gif?s=1&k=hel3gtn&ht=tk&h={host}&f=9882.9884.9892.9894.10294.10295.10296.10297.10300.10302&a=504211&_={_}”, “ps”: 1, “w”: “xxxxxx” };
Take note of the first array in brackets:
[“.tk-jubilat”, “\”jubilat\”,sans-serif”, “.tk-brandon-grotesque”, “\”brandon-grotesque\”,sans-serif”]
This is the array that loads the fonts and the corresponding CSS identifiers. In this case, we’re loading the Jubliat and Brandon-Grotesque fonts which are applied to the .tk-jubilat and .tk-brandon-grotesque CSS classes, respectively, in the HTML. Note that other definitions in the CSS file may also use these fonts, but we can’t tell which ones from this file; all we know is that these are the two fonts that are loaded by the Adobe TypeKit JavaScript file.
Create the new Adobe Typekit
Now it’s time to recreate the Kit. Head on over to https://typekit.com, log in, and create a new Kit by providing a name and the URLs on which you plan to use this kit. I’m not going to go into too much detail about how to do this because there are a ton of Adobe tutorials online.
Next, add the fonts we identified above into the new kit and publish the kit.
The final step is to obtain the embed code for the Typekit which can be done by clicking on the “Embed Code” link in the top right corner.
Copy that HTML code and replace the old code on your site with the new code from Adobe.
Testing the new Adobe Typekit Settings
Finally, test the site and make sure that the Adobe Typekit fonts are applied properly! You may need to adjust the Selectors on the screen shown above if the fonts aren’t working everywhere, but for the most part this should get you headed in the right direction.
Please let us know in the comments below if this helped or if you have additional questions!
1 Comment
Can I just say what a aid to search out someone who actually knows what theyre speaking about on the internet. You undoubtedly know easy methods to convey an issue to light and make it important. More folks need to learn this and perceive this facet of the story. I cant believe youre not more popular since you definitely have the gift.