Skip to main content

How to add and use new fonts on your pages

Learn how to add more fonts to your Learnybox pages and apply them to text elements or text styles.

This article explains how to add fonts to a Learnybox page, apply them to your text, and use custom code when you want to apply a font across several pages.

You can add a font to apply to any text elements you add to your page, as well as use custom CSS or JavaScript code for applying a specific font to all text elements of your page.


Add a new font to a specific page

  1. Open the page editor for the page where you want to add a new font.

  2. Click Advanced settings (top left), then select the page design option.
    ​

  3. Open the Texts tab, then expand the More fonts section.
    ​

  4. Select your desired font from the dropdown, then click Add.
    ​


    Note: You can preview it online if needed. The fonts available in this list come from Google Fonts.

  5. Click Save (bottom left) to save your changes.​

⚠️ Adding a font does not automatically apply it to text elements added to your page. It only makes the font available for selection as an additional font option for text elements on that page.

Apply the font to your text

After adding the font, you need to apply it to the text you want to customize.

You can do this in two ways:

  • Apply the font to a specific text element: select the text element on the page, then choose the font from the available font list.
    ​

  • Apply the font to a text style:
    -> Click Advanced settings (top left), then select the page design option.
    ​


    -> Open the Texts tab
    -> In the Text styles section, choose a text type such as Large title, Paragraph, or Small text, then assign the default font to that style.
    -> Click Save (bottom left) to save your changes.
    ​


    Any page text element that matches the configured style will default to that font.

Apply a font to several pages with custom code

If you want to apply the same font to several pages, you can use custom CSS or JavaScript.

This method is intended for users who are comfortable with code, or who are supported by someone with technical knowledge.

The location where you add the code determines where the font will apply.

Apply a font to the pages of a specific course

  1. Go to Academy → Courses

  2. Select the desired course
    ​

  3. Open the Settings tab

  4. Open the Design & visibility sub-tab

  5. Click Customize quickly
    ​

  6. At the bottom of the page, insert your CSS or JavaScript code in the fields provided.
    ​

  7. Click Save (bottom right) to apply your changes.

The code added here applies to the pages of that specific course.

Apply a font to website and blog pages

  1. Go to Website & Blog → Website

  2. Open the Settings tab

  3. Open the Themes sub-tab

  4. Click Customize quickly
    ​

  5. At the bottom of the page, insert your CSS or JavaScript code in the fields provided.

  6. Click Save (bottom right) to apply your changes.

The code added here applies to your website and blog pages.

Apply a font to sales funnel pages

For sales funnels specifically, even with CSS or JavaScript, the code must be added individually per page.

To add custom code to a sales funnel page:

  1. Open the relevant funnel page using the page editor.

  2. Click Advanced settings (top left), then select CSS and JavaScript code.
    ​

  3. Insert your code in the fields provided.
    ​

  4. Click Save (bottom left) to apply your changes.

The code added here applies only to the current sales funnel page. To apply the same font to several sales funnel pages, repeat the process on each relevant page.

Note: The code you need to add depends on the selected font and the desired result. Check your code before adding it to a published page, course, or website.

FAQ

Does adding a font automatically apply it to my page?

No. Adding a font only makes it available as an additional option on the current page. To use it, you still need to apply it manually to a text element or assign it to a text style.

Does the added font automatically apply to all my pages?

No. The More fonts setting only applies to the page where you add the font.

To use the same font on several pages, you need to either repeat the setting on each page or use custom code where appropriate.

Can I use a Google Font?

Yes. The fonts available in the dropdown list come from Google Fonts.

How can I apply the same font to several pages?

You can use custom code, but where you add the code matters:

  • For course pages, add the code from the relevant course’s Customize quickly section.

  • For website and blog pages, add the code from the website theme’s Customize quickly section.

  • For sales funnel pages, add the code directly in each page’s CSS and JavaScript code section.

Did this answer your question?