To add a custom font such as SF Pro (which is not available in Google Fonts) to JPageBuilder, you need to manually integrate it into your template or the page builder’s custom CSS.

First, obtain the font file in .woff2 format. Upload it to a dedicated folder on your website using the JPageBuilder Media Manager or any other method you prefer. For example: /files/jpagebuilder/sf-pro-display-medium.woff2

Next, load the font by adding the following CSS code to your template’s Custom CSS section or any custom stylesheet:

@font-face {
  font-family: 'SF Pro';
  src: url('/files/jpagebuilder/sf-pro-display-medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Once the font is loaded, apply it to your website by setting it as the default font or assigning it to specific elements:

body {
  font-family: 'SF Pro', sans-serif;
}

If you are using the built-in JPageBuilder template, you can add the custom CSS directly in the template settings:

It's also possible to load and apply custom fonts directly on each page under Page Settings → Style → Custom CSS:

After saving your changes, remember to clear your Joomla and browser caches so the new font displays correctly.

This same process works for any custom font. Simply replace the font name and file path with your own.