Gathering Your Palette: Fonts
Gone are the days of web-safe font limitations. With Splash, you can bulletproof the brand recognition of your page by adding your colors and typefaces.
The first thing we’ll need is each of your brand fonts in four file formats:
Why so many formats?! Great question. Uploading your fonts in these four formats ensures that they render on all browsers (with the exception of super outdated versions from simpler times when you would have been building this event website on GeoCities).
Note: All you need is a .ttf file format and using a free service such as Font2Web, you'll be able to generate the other formats in seconds.
Okay, let's upload your fonts to Splash!
The video below will walk you through the process; you can also follow along with the step by step.
- Gather your font formats by converting your .ttf file to the remaining three using your preferred font converter. We recommend font2web because it packages the four formats above in a zip file. How convenient!
- Unzip the files
- Return to Splash and click on the Design tab
- Click the gear next to Font Set; the text beside the gear should change to Edit on hover
- Click the Upload Font button
- Click Choose File and select your fonts from the unzipped zip file (Pro tip: Select the first font, hit shift, and select the last font to upload all four at once)
- Splash automatically sets your file name as the title of your font so clean this up as needed. Otherwise it may be difficult to tell which font is which.
- Click Upload
- Exit the Font Upload
- Click the green Add Font button then click on the font that has most recently appeared in the set above. This will trigger a dropdown.
- Select your font; you'll likely need to save and refresh your Splash page to see the custom font render on the page.
Repeat these steps for your remaining brand fonts. Heads up: Splash has a limit of five fonts per theme
Check out the video walkthrough below:
Similar to colors, Splash supports additional font sets. Just as we did with colors, you’ll want to build and order these strategically to ensure seamless transition from one set to the next.
Adding & Ordering Additional Font Sets
This flow will be pretty similar to its color set counterpart. We recommend starting by taking care of typography across your theme. From there, take a look at all text and make a note of the fonts assigned to each element and where those fonts fall in your font set. Your note may look something like this:
Headings: Gotham Bold (position 1)
Subheadings: Gotham Medium (position 2)
Body copy: Gotham light (position 3)
Now that you’ve equipped yourself with the necessary info, you can add a new font set and order it strategically just as we did with our colors sets.
We call this (you guessed it) "Font Linking":
- Click the Design tab
- Click the gear next to Font Set; the text beside the gear should change to Edit on hover.
- Click the Add Set button at the top left; this duplicates your current font set
You’ll notice that your font set number changes at the top right, just above the left and right arrows. Right now, you should be on font set 2 of 2
- Refer to your note, click on fonts, and choose based on the font’s position in the color set.
For example, if your note indicates that headline font fall in position one, click the first font and choose your new headline font
- Repeat until all fonts are strategically set
- Click Design again to exit the toolbar and save.
We're super supportive so we've included another video walkthrough below :)
Congrats! You’ve officially gathered your palette. It’s a bit time consuming and takes some attention to detail but think of this step as one good round of elbow grease. Setting things up this way makes building future themes a breeze. Trust us, you’ll thank yourself later.