Join Demian Borba for an in-depth discussion in this video Sync fonts from Typekit, part of Developing a Design System with Adobe XD.
- [Instructor] The first thing you see when you open the project 02_02_project is that there's a missing font right? You see this warning icon, and we need to use Typekit to solve that problem. For our project we need Adelle PE, Adelle in general. So in order to get it, I need to use Typekit. So let's jump into our Creative Cloud desktop app and see what we need to do there. So here I am, I can go to assets, font, and here I can see that I can manage my Typekit fonts.
I have a couple fonts already synced, but I need to go to the Typekit website and sync Adelle. So I'll click there. I can see a list of fonts that are available. I can see some lists. This is really helpful, I can even filter if I want to only see references of sans serif or serif, it's really helping me there, but the one I need to get is Adelle.
So I'll type there in the search field, and then this is the one I want. It has 28 fonts. And I can see that this is all the applications I have there for the font, and I can even test a custom text, let's say design systems with XD, and you can see how that text will show up here before you sync.
The project is called DDTS, and it looks good to me, so now I can go there and say okay, please sync all the fonts into my Typekit account. Good, now I can see that 18 fonts were added and if I go back to XD now, that warning is gone and now I can use the Adelle font with any problems. I can even see, if I type anything, let's say Adobe XD, I can then see that Adelle is there for me, and I can change the size.
If I do up and down arrows, it goes up in increments of one, if I hold shift, it goes in increments of 10. And I can change the type, bold, and even the color if I want to. Now that I have my font set up, let's learn how to use this more globally throughout this entire document.
- Managing your project
- Managing typography and colors
- Pattern library with symbols
- Creating a CC Library in Photoshop
- Consuming colors and character styles
- Using linked and unlinked bitmaps
- Exporting assets
- Gathering feedback