Hello @ferdinandbardamu ,
Glad you reached out, happy to help.
We have a global space where you can add your custom CSS to apply to all donation forms that knows how to work with the iFrame. To do this navigate to GiveWP > Settings > Advanced – Donation Forms, and place your CSS there.
Here is a link to a screenshot of how that page appears:
https://loom.com/i/c8236cff754246a18dd454afb6e04f72
Let us know how things go! Have a great weekend 🙂
Hi, Ginger. I appreciate the prompt response. However, I am afraid you are misunderstanding the problem so I will restate. When I said “even using the built-in custom CSS styles section” that was referring to the “global space” you pointed me to. And yes that does work fine for styling the form inside the iframe. I can even change the font-family property inside the iframe. What I cannot do is effectively change the font-family property to my custom fonts. (Changing them to a supported system font works fine.) By “custom fonts” I am referring to fonts I have directly loaded in my parent document’s CSS as these are unavailable to the iframe. I have included @font-face declarations in the provided GiveWP custom CSS section and these seem to pass sanitization and are saved but they do not actually load the custom fonts. Perhaps they are silently dropped? I have also tried @import for the Roboto Google font and it likewise is saved but the font is not actually imported and available to the iframe. This is a big problem for anyone using non system fonts.
Hello @ferdinandbardamu ,
Thanks for the update! My recommendation was meant to make sure you knew of the global section for CSS as well as the individual per-form builder CSS Styles section in Design – Styles.
Regarding using @import to bring in a Google font, I tested this with this CSS entry in the CSS Styles section on the form for the header title and it worked correctly:
@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap');
.givewp-layouts.givewp-layouts-headerTitle h2{
font-family: 'Protest Guerrilla';
}
Here is screenshot of how the donation form header title appears now:
https://www.loom.com/i/e23405a83d494168af35e001911efc4e
Let me know if this works for you please. If not, please include the entries you are adding to that CSS Style section for reference.
Have a great test of your day/evening 🙂
Here is the pertinent section of CSS I have at Settings > Advanced > Donation Forms
@font-face {
font-family: 'BENTONSANS-COMP-BLACK';
src: url('//hannahandfriends.org/wp-content/uploads/2025/09/bentonsans_comp_black-webfont-1.woff2') format('woff2'),
url('//hannahandfriends.org/wp-content/uploads/2025/09/bentonsans_comp_black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nanami-Light';
src: url('//hannahandfriends.org/wp-content/uploads/2025/09/Nanami-Light.woff2') format('woff2'),
url('//hannahandfriends.org/wp-content/uploads/2025/09/Nanami-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');
}
/* Fonts Test */
@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap');
.give-form, .give-form * {
font-family: 'Roboto', sans-serif;
}
.givewp-layouts.givewp-layouts-headerTitle h2{
font-family: 'Protest Guerrilla';
}
.givewp-layouts.givewp-layouts-headerTitle h3{
font-family: 'Protest Guerrilla';
}
/* End Fonts Test */
I have cleared GiveWP cache and performed a hard reload of the page in question (I have updated my hosts file to work on the site with the correct domain but you can access it by proxy here: https://hannahandfriendsorg.skipdns.link/give/) before recording the screencast below. As you can see, the fonts shown are still the defaults. When I inspect in dev tools and go to change the font-family property, the fonts I added via @font-face are available to be selected but doing so does not change them to those fonts, just to system defaults. (Presumably, the page is aware of them but they cannot be called for iframe content.) The fonts added via @import are not available to be selected and entering them manually likewise does not result in those fonts being displayed. When I look at the Network > Fonts section of the dev console, I can see that the two custom fonts that Avada loads via @font-face are present in some Avada CSS. There are not separate entries for these fonts in any GiveWP CSS.
Screencast (expires in 2 days): https://streamable.com/k4c07o
Screenshot (expires in 3 days): https://temp.sh/sYMtQ/Screenshot_from_2025-10-22_13-50-13.png
If I grab the content of the iframe and paste it into an Avada code block, the fonts display properly. I will see if I can do this cleanly and just use the shortcode to generate the forms. Seems like this could break easily but we shall see.
It appears the plugin is using public DNS for its own lookups? (Or that there are public lookups occurring at some point.) That would definitely cause this problem. In which case I guess I will just see this as moot for now and proceed under the assumption it will resolve once the site is public.
To be clear, I created a shortcode to just pull the content of the iframe src but what was displayed was not the form but default 404 content from the live site. So if the font src lookups are also hitting the live site instead of the dev site then they of course cannot take effect.
Just following up to confirm I am able to load these fonts now that I have the site on the public internet. We definitely need to be loading these in our GiveWP CSS and I also found the easiest thing to do was skip the specificity and use selectors like body, h1, h2, h3, etc.
