Google Fonts on your PBLP

Summary

When using a Project Broadcast Landing Page (PBLP) for your Event's Signup Page and/or Party Page, you can add extra style by incorporating Google Fonts!

You can set these in the "Fonts" area of an Event. Then, Sparkhub will override the fonts set on your PBLP design page, and instead apply the selected Google Fonts and colors to the page. The font sizes are set on the PBLP design screen.

How fonts work on a PBLP

When adding text to a PBLP, there are both "body" and "header" types:

Body text is found in regular "text" blocks and also button labels.
Header 1 ("H1"), H2, H3, and H4 are all available in Header block types.
- Note - some Sparkhub code blocks, such as the "host feature" block that you may use, include header text; this is always H2.

If no Google Fonts are selected for the PBLP in your Sparkhub settings, then the fonts that will show will be set in the PBLP design screen, which provides 27 font options.

Override the PBLP fonts with Sparkhub-powered Google Fonts

Sparkhub can override the fonts and colors of your PBLP fonts, if your Event is set up with Google Fonts. This gives you about 1,500 fonts to choose from. To do this,

Design your PBLP with a variety of font types: for instance, regular "text" blocks that will contain a basic and very readable text; H1 blocks for major headings with a more stylized font; and H2 blocks for secondary headings.
Select fonts from Google Fonts that you wish to apply to your page.
In Sparkhub, open your Event and navigate to the "Fonts" tab.
For any font types that you want to apply Google Fonts to, click on the drop-down box and start typing the name of the font to select it.
- If any drop-down box is blank, then the font selected in the PBLP design screen will apply. (For instance, if you don't select an H4 override and your design has an H4 block, then that block will simply display the font indicated in the PBLP design.)
- For any drop-down box that is populated, then that font type (eg, H2) on the PBLP will always display with the selected Google Font, overriding the font shown in the PBLP.
Color: If desired, enter the 6-character hex code you wish to use. You don't need to select a color here if you want to just choose colors on the PBLP design screen, but this gives you the opportunity to change the look of your page without having to edit the colors in the PBLP design screen.
- If any drop-down box for color is blank, then the color selected in the PBLP design screen will apply.
- For any drop-down box that is populated, then that font type on the PBLP will always display with the selected color, ignoring any colors selected in the PBLP design screen for that type (eg, H2).
- You can type "black" to use black.

Troubleshooting: Do your fonts look off?

We found that PBLPs make all header fonts bold by default, so you might find that your fonts look different on your page than they do when previewed at fonts.google.com.

This happens even if, when selecting the header block on your PBLP design screen, the text appears to be set with a "Font Weight" of "Regular." However, it still shows as bold.

If you don't want your headers to be bold, click on the header block, toggle the "Font Weight" from "Regular" to "Bold," and then toggle it back to "Regular." (And, of course, save your design.) This will make the block have regular weight.

Design Tips

It's important to understand that when you are designing inside your PBLP, your page will not "know" about the Google Fonts you intend to use. Those aren't called upon until (1) the PBLP is attached to an Event with Google Fonts set on it and (2) it is opened in a browser. So, you won't see your beautiful fonts while designing. That's okay!

The one thing that can get tricky is guessing the font size you need. You may need to experiment with this. If you save your design, then open it (by opening the Signup or Party Page from your Sparkhub Event), you may find that your particular font selection benefits from being sized up or down. This varies from one font to another. Continue adjusting, saving, and testing, keeping in mind that once you have set the optimal size, you won't have to mess with it again!