How to Add a Custom Font to Your Site (Legacy experience only)

Updated Sep 30, 2024

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.

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à 🎉