Add Typekit Fonts To Your Breezi Website
Adding a Typekit to your site can prove to be really helpful, and with this simple tutorial you can learn how to do it in simple but quick steps. We are going to divide this in two sections.
- Steps on TypeKit
- Steps on our web app
Steps on TypeKit
First steps will be done on TypeKit, if you have any questions on this ones go ahead and contact them or write a comment at the end of this post!
Create a TypeKit Kit
Log In to your Typekit account and create a typekit of your own, name the kit the way you want it to show on the code.
Copy & Save
Once typekit is created the page will redirect you to a place where you can copy the code that needs to be placed on a further instance. Copy this code and save it for later.
It’s time to add some fonts, browse trough the selection of fonts presented on the site. This step should be familiar now to Typekit users.
Add a tag
Once that you have selected your font go ahead and add the tag, this tag should be easy to remember and familiar to you since will be the one that will show on your code and on your site.
Replace the code
Get the CSS font name and replace it in THIS code, replace selector chosen and font selected too.
Back to our Platform
It’s time to work on your site, open the More menu on the shelf at the bottom of the editor and click on the URL/Custom Tracking Code section. Copy and paste first code that was given by Typekit when the kit was created and paste it. Also paste the modified version of THIS code once you had replaced the tag and font name selected values. Hit save and the page will reload. The code should look similar to the one in the picture below.
Back to your site, once you have replaced and saved the code, simply select one of the tags through our editor and font will show as if nothing had happened, publish your site and check how font selected will be overwritten by the one you have selected for that tag and kit on TypeKit.
This is how the font will look like once your site has been published.
That is all for today
Check our other tutorials with Tips & Tricks for your Website. Feel free to ask any questions on this and write in our comments sections!