Using Branded Fonts

Using your organization’s branded fonts on Giving Forms helps create a more consistent look and feel with the rest of your website. While the Giving Form editor includes a limited set of fonts, using an external font allows you to apply your exact brand font and achieve a more seamless, on-brand experience.

The first step towards getting the branded font on your form is to Import your font of choice.

Importing an External Font via CSS

At the top of your Custom CSS, import the font using this syntax:

@import url('https://yo.ur/font/here');

This will make the font available for the next statement, which changes the font of all Giving Form elements:

.GF-Form * {
    font-family: 'your-font' !important;
}

One of the easier and more reliable methods to import a font is via Google Fonts. Below is an example for importing the Roboto font:

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


.GF-Form * {
    font-family: 'Roboto' !important;
}

Omitting Elements from Font Change

In some cases, a branded font may not display well on certain parts of the form. For example, a font that works nicely for headings or body text may reduce clarity on payment option buttons.

To apply a different font to a specific element, you can override the main font setting with a targeted CSS rule. In the example below, the Credit payment option button is set to use Arial for improved readability.

.GF-PaymentOptions__button{
  font-family:'Arial' !important;
}

The !important keyword ensures this font is used instead of the default or previously defined font styles. This allows you to fine-tune font usage so each part of the form remains clear, accessible, and easy to read.