[Legacy Experience] How to Add a Custom Font to Your Site

Updated Mar 31, 2025
Video Player is loading.
Current Time 0:00
Duration 0:00
Loaded: 0%
Stream Type LIVE
Remaining Time 0:00
 
1x
  • Chapters
  • descriptions off, selected
  • captions off, selected

    Note: This is only for Legacy Experience sites. The New Community Experience doesn’t allow CSS in the site, so you can’t add a custom font this way.

    To add custom font on the New Community Experience, please follow the instructions in this guide.


    In this video I'll show you how to add a custom font to your website or membership site theme. 

    Custom CSS Workshop I mention in the video: https://www.crowdcast.io/e/custom-css-workshop

    Webfont Generator Tools:

    Code Snippets + Instructions from Video: 

    STEP 1: Bring in the font...

    @font-face {
    font-family: 'James fajardo';
    src: url('https://us.simplerousercontent.net/uploads/asset/file/3553187/James-Fajardo.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    }

    STEP 2: Assign that font-family to different elements (headers, buttons, body text, etc)...

    body, h1, h2, h3, h4, p, a, .btn {
    font-family: 'James fajardo', sans-serif;
    }

    Et voilà 🎉