Ask a Question ?
Design & Publish Websites Faster

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.

Create a Typekit Kit

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. Copy this code and save it for later.

Code

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.

Add Fonts

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 site.

Selector

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.

CSS

This is the code that you need to copy and paste on the default code that we have provided before.

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.

Add Code

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 will be overwritten by the one you have selected for that tag and kit on TypeKit.

Tag

Drop down menu showing tag selected and being applied.

 

This is how the font will look like once your site has been published.

Font

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 Website. Feel free to ask any questions on this and write in our comments sections!

 

Menu