What you will need:
- A Typekit account
- A Typekit embed code snippet
- A Landing Lion account
- A Landing Lion page
Get the Typekit embed code snippet
1. Sign into your Typekit account
2. Click on a font you want to add to your landing page
3. Click “Add to kit”, found on the right side of the page
4. You can choose to add your selected font to an existing kit, or create a new kit. If you choose to create a new kit, you'll be given the embed code after naming the kit and adding your domains to Typekit.
If you choose to add the font to an existing kit, you will be able to view your embed code by clicking on "Embed Code" found at the top right of your popped up kit editor.
5. Copy the embed code
Add the Typekit embed code to your landing page
1. Go to "Page Settings" in your landing page and click on the "Custom Code" tab.
2. In the Header field (or <head> tag), enter the code snippet with the embed code you copied from Typekit.
3. You will also need to add custom CSS directly under the Typekit embed code to override Landing Lion's fonts. In your custom CSS, you can choose specific HTML tags you want to use your Typekit font. They are <p>, <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The code below is an example of what your CSS should look like:
font-family: "your-font-here", sans-serif !important;
❗️Important: Make sure to add "!important" to your CSS to ensure you will override Landing Lion's default styling. Custom code will not render while in the Page Builder, but will take effect when viewing a published page.
Congratulations! Typekit has now been integrated with your page!