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

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:

• https://transfonter.org/

• https://www.fontsquirrel.com/tools/webfont-generator
  

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