🚨 Important: make sure you have experience working with CSS.

1. Have the custom font(s) you would like to add to a page on hand. They will typically be in a .otf or .ttf file format

2. Go to https://transfonter.org/. For the checkboxes on the right side, make sure only WOFF and WOFF2 are selected. Add your font(s) and then convert them.

3. Upload the WOFF and WOFF2 file formats somewhere where you host them online and use their file path. You can upload them into the Files section of your Landing Lion account if you'd like.

4. Copy the path for each font file and keep the URLs handy.

5. Copy and paste this code either into an Embed component, or the custom code section of the page settings:

<style>
    @font-face {
      font-family: 'Font name';
  src: url('') format('woff2'),
    url('') format('woff');
      font-weight: normal;
      font-style: normal;
    }
   
    h1,h2,p {
        font-family: 'Font name', sans-serif !important;
    }
</style>


6. "Font-family" can be any name you'd like to use. Make sure what is set in the first "font-family" matches exactly the same name set in the last "font-family".

7. Copy and paste the file path URLs into the appropriate slots within the  @font-face  CSS.

8. The second block of CSS tells your page which headline and text tags to use the custom font. You can use h1, h2, h3, h4, h5, h6, and p.

Now your page is using your custom fonts to match your brand guidelines!

Did this answer your question?