Add Typekit Fonts To Your Breezi Website
Adding a Typekit to your Breezi 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 Breezi
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.
Name and Domains to be used
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 on Breezi. Copy this code and save it for later.
Copy this code and save it for later.
Select Fonts
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.
Fonts selectable on Typekit
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 Breezi site.
Selector and Tag addition. Click on the Using Font in CSS for the next step.
Replace the code
Get the CSS font name and replace it in THIS code, replace selector chosen and font selected too.
This is the code that you need to copy and paste on the default code that we have provided before.
Back to Breezi
It’s time to work on your Breezi 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.
Arrow on top points to the first code provided by Typekit. Arrows at the bottom show code to be replaced with proper tag selected and font name chosen.
Your Site
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 on Breezi will be overwritten by the one you have selected for that tag and kit on TypeKit.
Drop down menu showing tag selected and being applied.
This is how the font will look like once your site has been published.
This is how the font that we have selected show in your public site.
That is all for today
Check our other tutorials with Tips & Tricks for your Breezi Website. Feel free to ask any questions on this and write in our comments sections!
