Using Branded Fonts

Use Custom CSS to Include Branded Fonts

This article assumes a working knowledge of CSS.  A primer can be found here.

Using branded fonts for your Giving Forms can go a long way toward reinforcing the look and feel of your web presence.  While the Giving Form editor does offer a selection of fonts, using an external font opens up seemingly infinite options, but most importantly, your organization's font.

For example, click into this frame and scroll around:

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;
}

If you'd like to see it in action using the font from the example, here's something you can try out on your own Giving Form:

@import url('https://fonts.cdnfonts.com/css/marker-sd');

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

Omitting Elements from Font Change

As much as I love that font from the example, it simply did not look good on the payment option button for Credit.  So, I switched it out for good ole Arial.

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

Remember, if "!important" is not present, this statement will not override the previous one.